better-svelte-email 1.0.0-beta.2 → 1.0.1

package/dist/preprocessor/index.js

@@ -1,227 +0,0 @@
-import MagicString from 'magic-string';
-import { parseAttributes } from './parser.js';
-import { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './transformer.js';
-import { injectMediaQueries } from './head-injector.js';
-import path from 'path';
-/**
- * Svelte 5 preprocessor for transforming Tailwind classes in email components
- *
- * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
- *
- * @example
- * ```javascript
- * // Old (deprecated):
- * // svelte.config.js
- * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
- *
- * export default {
- *   preprocess: [
- *     vitePreprocess(),
- *     betterSvelteEmailPreprocessor({
- *       pathToEmailFolder: '/src/lib/emails',
- *       tailwindConfig: { ... }
- *     })
- *   ]
- * };
- *
- * // New (recommended):
- * import Renderer from 'better-svelte-email/renderer';
- * import EmailComponent from './email.svelte';
- *
- * const renderer = new Renderer({
- *   theme: {
- *     extend: {
- *       colors: { brand: '#FF3E00' }
- *     }
- *   }
- * });
- *
- * const html = await renderer.render(EmailComponent, {
- *   props: { name: 'John' }
- * });
- * ```
- *
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess
- */
-export function betterSvelteEmailPreprocessor(options = {}) {
-    const { tailwindConfig, pathToEmailFolder = '/src/lib/emails', debug = true } = options;
-    // Initialize Tailwind converter once (performance optimization)
-    const tailwindConverter = createTailwindConverter(tailwindConfig);
-    // Return a Svelte 5 PreprocessorGroup
-    return {
-        name: 'better-svelte-email',
-        /**
-         * The markup preprocessor transforms the template/HTML portion
-         * This is where we extract and transform Tailwind classes
-         */
-        markup({ content, filename }) {
-            // Only process .svelte files in the configured email folder
-            if (!filename || !filename.includes(pathToEmailFolder)) {
-                // Return undefined to skip processing
-                return;
-            }
-            if (!filename.endsWith('.svelte')) {
-                return;
-            }
-            try {
-                // Process the email component
-                const result = processEmailComponent(content, filename, tailwindConverter, tailwindConfig);
-                // Log warnings if debug mode is enabled
-                if (result.warnings.length > 0) {
-                    if (debug) {
-                        console.warn(`[better-svelte-email] Warnings for ${path.relative(process.cwd(), filename)}:\n`, result.warnings.join('\n'));
-                    }
-                }
-                // Return the transformed code
-                // The preprocessor API expects { code: string } or { code: string, map: SourceMap }
-                return {
-                    code: result.transformedCode
-                    // Note: Source maps could be added here via MagicString's generateMap()
-                };
-            }
-            catch (error) {
-                console.error(`[better-svelte-email] Error processing ${filename}:`, error);
-                // On error, return undefined to use original content
-                // This prevents breaking the build for non-email files
-                return;
-            }
-        }
-    };
-}
-/**
- * Process a single email component
- */
-function processEmailComponent(source, _filename, tailwindConverter, tailwindConfig) {
-    const warnings = [];
-    let transformedCode = source;
-    const allMediaQueries = [];
-    // Step 1: Parse and find all class attributes
-    const attributes = parseAttributes(source);
-    if (attributes.length === 0) {
-        // No classes to transform
-        return {
-            originalCode: source,
-            transformedCode: source,
-            mediaQueries: [],
-            hasHead: false,
-            warnings: []
-        };
-    }
-    // Step 2: Transform each class attribute
-    const s = new MagicString(transformedCode);
-    // Process in reverse order to maintain correct positions
-    const sortedAttributes = [...attributes].sort((a, b) => b.class.start - a.class.start);
-    for (const attr of sortedAttributes) {
-        if (!attr.class.isStatic) {
-            // Skip dynamic classes for now
-            warnings.push(`Dynamic class expression detected in ${attr.class.elementName}. ` +
-                `Only static classes can be transformed at build time.`);
-            continue;
-        }
-        // Transform the classes
-        const transformed = transformTailwindClasses(attr.class.raw, tailwindConverter);
-        // Collect warnings about invalid classes
-        if (transformed.invalidClasses.length > 0) {
-            warnings.push(`Invalid Tailwind classes in ${attr.class.elementName}: ${transformed.invalidClasses.join(', ')}`);
-        }
-        // Generate media queries for responsive classes
-        if (transformed.responsiveClasses.length > 0) {
-            const mediaQueries = generateMediaQueries(transformed.responsiveClasses, tailwindConverter, tailwindConfig);
-            allMediaQueries.push(...mediaQueries);
-        }
-        // Build the new attribute value
-        const newAttributes = buildNewAttributes(transformed.inlineStyles, transformed.responsiveClasses, attr.style?.raw);
-        // Remove the already existing style attribute if it exists
-        if (attr.style) {
-            removeStyleAttribute(s, attr.style);
-        }
-        // Replace the class attribute with new attributes
-        replaceClassAttribute(s, attr.class, newAttributes);
-    }
-    transformedCode = s.toString();
-    // Step 3: Inject media queries into <Head>
-    if (allMediaQueries.length > 0) {
-        const injectionResult = injectMediaQueries(transformedCode, allMediaQueries);
-        if (!injectionResult.success) {
-            warnings.push(injectionResult.error || 'Failed to inject media queries');
-        }
-        else {
-            transformedCode = injectionResult.code;
-        }
-    }
-    return {
-        originalCode: source,
-        transformedCode,
-        mediaQueries: allMediaQueries,
-        hasHead: allMediaQueries.length > 0,
-        warnings
-    };
-}
-/**
- * Build new attribute string from transformation result
- */
-function buildNewAttributes(inlineStyles, responsiveClasses, existingStyles) {
-    const parts = [];
-    // Add responsive classes if any
-    if (responsiveClasses.length > 0) {
-        const sanitizedClasses = responsiveClasses.map(sanitizeClassName);
-        parts.push(`class="${sanitizedClasses.join(' ')}"`);
-    }
-    // Add inline styles if any
-    if (inlineStyles) {
-        // Escape quotes in styles
-        const escapedStyles = inlineStyles.replace(/"/g, '&quot;');
-        const withExisting = escapedStyles + (existingStyles ? existingStyles : '');
-        parts.push(`style="${withExisting}"`);
-    }
-    return parts.join(' ');
-}
-/**
- * Replace class attribute with new attributes using MagicString
- */
-function replaceClassAttribute(s, classAttr, newAttributes) {
-    // We need to replace the entire class="..." portion
-    // The positions from AST are for the value, not the attribute
-    // So we need to search backwards for class="
-    // Find the start of the attribute (look for class=")
-    const beforeAttr = s.original.substring(0, classAttr.start);
-    const attrStartMatch = beforeAttr.lastIndexOf('class="');
-    if (attrStartMatch === -1) {
-        console.warn('Could not find class attribute start position');
-        return;
-    }
-    // Find the end of the attribute (closing quote)
-    const afterValue = s.original.substring(classAttr.end);
-    const quotePos = afterValue.indexOf('"');
-    if (quotePos === -1) {
-        console.warn('Could not find class attribute end position');
-        return;
-    }
-    const fullAttrStart = attrStartMatch;
-    const fullAttrEnd = classAttr.end + quotePos + 1;
-    // Replace the entire class="..." with our new attributes
-    if (newAttributes) {
-        s.overwrite(fullAttrStart, fullAttrEnd, newAttributes);
-    }
-    else {
-        // No attributes to add - remove the class attribute entirely
-        // Also remove any extra whitespace
-        let removeStart = fullAttrStart;
-        let removeEnd = fullAttrEnd;
-        // Check if there's a space before
-        if (s.original[removeStart - 1] === ' ') {
-            removeStart--;
-        }
-        // Check if there's a space after
-        if (s.original[removeEnd] === ' ') {
-            removeEnd++;
-        }
-        s.remove(removeStart, removeEnd);
-    }
-}
-/**
- * Remove style attribute with MagicString
- */
-function removeStyleAttribute(s, styleAttr) {
-    s.remove(styleAttr.start, styleAttr.end);
-}

package/dist/preprocessor/parser.d.ts

@@ -1,17 +0,0 @@
-import type { ClassAttribute, StyleAttribute } from './types.js';
-/**
- * Parse Svelte 5 source code and extract all class attributes
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#parse
- */
-export declare function parseAttributes(source: string): {
-    class: ClassAttribute;
-    style?: StyleAttribute;
-}[];
-/**
- * Find the <Head> component in Svelte 5 AST
- * Returns the position where we should inject styles
- */
-export declare function findHeadComponent(source: string): {
-    found: boolean;
-    insertPosition: number | null;
-};

package/dist/preprocessor/parser.js

@@ -1,315 +0,0 @@
-import { parse } from 'svelte/compiler';
-/**
- * Parse Svelte 5 source code and extract all class attributes
- * Reference: https://svelte.dev/docs/svelte/svelte-compiler#parse
- */
-export function parseAttributes(source) {
-    const attributes = [];
-    try {
-        // Parse the Svelte file into an AST
-        // Svelte 5 parse returns a Root node with modern AST structure
-        const ast = parse(source);
-        // Walk the html fragment (template portion) of the AST
-        if (ast.html && ast.html.children) {
-            for (const child of ast.html.children) {
-                walkNode(child, attributes, source);
-            }
-        }
-    }
-    catch (error) {
-        console.error('Failed to parse Svelte file:', error);
-        throw error;
-    }
-    return attributes;
-}
-/**
- * Recursively walk Svelte 5 AST nodes to find class attributes
- */
-function walkNode(node, attributes, source) {
-    if (!node)
-        return;
-    // Svelte 5 AST structure:
-    // - Element: HTML elements like <div>, <button>
-    // - InlineComponent: Custom components like <Button>, <Head>
-    // - SlotElement: <svelte:element> and other svelte: elements
-    if (node.type === 'Element' ||
-        node.type === 'InlineComponent' ||
-        node.type === 'SlotElement' ||
-        node.type === 'Component') {
-        const elementName = node.name || 'unknown';
-        // Look for class and style attribute in Svelte 5 AST
-        const classAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'class');
-        const styleAttr = node.attributes?.find((attr) => attr.type === 'Attribute' && attr.name === 'style');
-        if (classAttr && classAttr.value) {
-            // Extract class value
-            const extractedClass = extractClassValue(classAttr, source);
-            let extractedStyle = null;
-            if (styleAttr && styleAttr.value) {
-                extractedStyle = extractStyleValue(styleAttr, source);
-            }
-            if (extractedClass) {
-                attributes.push({
-                    class: {
-                        raw: extractedClass.value,
-                        start: extractedClass.start,
-                        end: extractedClass.end,
-                        elementName,
-                        isStatic: extractedClass.isStatic
-                    },
-                    style: extractedStyle
-                        ? {
-                            raw: extractedStyle.value,
-                            start: extractedStyle.start,
-                            end: extractedStyle.end,
-                            elementName
-                        }
-                        : undefined
-                });
-            }
-        }
-    }
-    // Recursively process children
-    if (node.children) {
-        for (const child of node.children) {
-            walkNode(child, attributes, source);
-        }
-    }
-    // Handle conditional blocks (#if, #each, etc.)
-    if (node.consequent) {
-        if (node.consequent.children) {
-            for (const child of node.consequent.children) {
-                walkNode(child, attributes, source);
-            }
-        }
-    }
-    if (node.alternate) {
-        if (node.alternate.children) {
-            for (const child of node.alternate.children) {
-                walkNode(child, attributes, source);
-            }
-        }
-    }
-    // Handle #each blocks
-    if (node.body) {
-        if (node.body.children) {
-            for (const child of node.body.children) {
-                walkNode(child, attributes, source);
-            }
-        }
-    }
-}
-/**
- * Extract the actual class value from a Svelte 5 attribute node
- */
-function extractClassValue(classAttr, source) {
-    // Svelte 5 attribute value formats:
-    // 1. Static string: class="text-red-500"
-    //    → value: [{ type: 'Text', data: 'text-red-500' }]
-    //
-    // 2. Expression: class={someVar}
-    //    → value: [{ type: 'ExpressionTag', expression: {...} }]
-    //
-    // 3. Mixed: class="static {dynamic} more"
-    //    → value: [{ type: 'Text' }, { type: 'ExpressionTag' }, { type: 'Text' }]
-    if (!classAttr.value || classAttr.value.length === 0) {
-        return null;
-    }
-    // Check if entirely static (only Text nodes)
-    const hasOnlyText = classAttr.value.every((v) => v.type === 'Text');
-    if (hasOnlyText) {
-        // Fully static - we can safely transform this
-        const textContent = classAttr.value.map((v) => v.data || '').join('');
-        const start = classAttr.value[0].start;
-        const end = classAttr.value[classAttr.value.length - 1].end;
-        return {
-            value: textContent,
-            start,
-            end,
-            isStatic: true
-        };
-    }
-    // Check if entirely dynamic (only ExpressionTag or MustacheTag)
-    const hasOnlyExpression = classAttr.value.length === 1 &&
-        (classAttr.value[0].type === 'ExpressionTag' || classAttr.value[0].type === 'MustacheTag');
-    if (hasOnlyExpression) {
-        // Fully dynamic - cannot transform at build time
-        const exprNode = classAttr.value[0];
-        const expressionCode = source.substring(exprNode.start, exprNode.end);
-        return {
-            value: expressionCode,
-            start: exprNode.start,
-            end: exprNode.end,
-            isStatic: false
-        };
-    }
-    // Mixed content (both Text and ExpressionTag)
-    // Extract only the static Text portions for partial transformation
-    let combinedValue = '';
-    const start = classAttr.value[0].start;
-    const end = classAttr.value[classAttr.value.length - 1].end;
-    let hasStaticContent = false;
-    for (const part of classAttr.value) {
-        if (part.type === 'Text' && part.data) {
-            combinedValue += part.data + ' ';
-            hasStaticContent = true;
-        }
-        // Skip ExpressionTag nodes
-    }
-    if (hasStaticContent) {
-        return {
-            value: combinedValue.trim(),
-            start,
-            end,
-            isStatic: false // Mixed is not fully static
-        };
-    }
-    return null;
-}
-/**
- * Extract the actual style value from a Svelte 5 attribute node
- */
-function extractStyleValue(styleAttr, source) {
-    // Svelte 5 attribute value formats:
-    // 1. Static string: style="color: red;"
-    //    → value: [{ type: 'Text', data: 'color: red;' }]
-    //
-    // 2. Expression: style={someVar}
-    //    → value: [{ type: 'ExpressionTag', expression: {...} }]
-    //
-    // 3. Mixed: style="color: red; {dynamicStyle}"
-    //    → value: [{ type: 'Text' }, { type: 'ExpressionTag' }]
-    if (!styleAttr.value || styleAttr.value.length === 0) {
-        return null;
-    }
-    // Check if entirely static (only Text nodes)
-    const hasOnlyText = styleAttr.value.every((v) => v.type === 'Text');
-    if (hasOnlyText) {
-        // Fully static - we can extract this
-        const textContent = styleAttr.value.map((v) => v.data || '').join('');
-        return {
-            value: textContent,
-            start: styleAttr.start,
-            end: styleAttr.end
-        };
-    }
-    // Check if entirely dynamic (only ExpressionTag or MustacheTag)
-    const hasOnlyExpression = styleAttr.value.length === 1 &&
-        (styleAttr.value[0].type === 'ExpressionTag' || styleAttr.value[0].type === 'MustacheTag');
-    if (hasOnlyExpression) {
-        // Fully dynamic - extract the expression code
-        const exprNode = styleAttr.value[0];
-        const expressionCode = source.substring(exprNode.start, exprNode.end);
-        return {
-            value: expressionCode,
-            start: exprNode.start,
-            end: exprNode.end
-        };
-    }
-    // Mixed content (both Text and ExpressionTag)
-    // Extract the full content including dynamic parts
-    const start = styleAttr.value[0].start;
-    const end = styleAttr.value[styleAttr.value.length - 1].end;
-    const fullContent = source.substring(start, end);
-    return {
-        value: fullContent,
-        start: styleAttr.start,
-        end: styleAttr.end
-    };
-}
-/**
- * Find the <Head> component in Svelte 5 AST
- * Returns the position where we should inject styles
- */
-export function findHeadComponent(source) {
-    try {
-        const ast = parse(source);
-        // Find Head component in the AST
-        if (ast.html && ast.html.children) {
-            for (const child of ast.html.children) {
-                const headInfo = findHeadInNode(child, source);
-                if (headInfo)
-                    return headInfo;
-            }
-        }
-        return { found: false, insertPosition: null };
-    }
-    catch {
-        return { found: false, insertPosition: null };
-    }
-}
-/**
- * Recursively search for Head component in Svelte 5 AST
- */
-function findHeadInNode(node, source) {
-    if (!node)
-        return null;
-    // Check if this is the Head component (InlineComponent type in Svelte 5)
-    if ((node.type === 'InlineComponent' || node.type === 'Component') && node.name === 'Head') {
-        // Svelte 5: Find the best insertion point for styles
-        // If Head has children, insert before first child
-        if (node.children && node.children.length > 0) {
-            return {
-                found: true,
-                insertPosition: node.children[0].start
-            };
-        }
-        // No children - need to insert before closing tag
-        // Find where the opening tag ends
-        const headStart = node.start;
-        const headEnd = node.end;
-        const headContent = source.substring(headStart, headEnd);
-        // Self-closing: <Head />
-        if (headContent.includes('/>')) {
-            // Convert to non-self-closing by inserting before />
-            const selfClosingPos = source.indexOf('/>', headStart);
-            return {
-                found: true,
-                insertPosition: selfClosingPos
-            };
-        }
-        // Regular closing tag: <Head></Head> or <Head>...</Head>
-        const closingTagPos = source.indexOf('</Head>', headStart);
-        if (closingTagPos !== -1) {
-            return {
-                found: true,
-                insertPosition: closingTagPos
-            };
-        }
-        // Fallback: insert right after opening tag
-        const openingTagEnd = source.indexOf('>', headStart);
-        if (openingTagEnd !== -1) {
-            return {
-                found: true,
-                insertPosition: openingTagEnd + 1
-            };
-        }
-    }
-    // Search recursively through the AST
-    if (node.children) {
-        for (const child of node.children) {
-            const found = findHeadInNode(child, source);
-            if (found)
-                return found;
-        }
-    }
-    // Check conditional branches
-    if (node.consequent) {
-        if (node.consequent.children) {
-            for (const child of node.consequent.children) {
-                const found = findHeadInNode(child, source);
-                if (found)
-                    return found;
-            }
-        }
-    }
-    if (node.alternate) {
-        if (node.alternate.children) {
-            for (const child of node.alternate.children) {
-                const found = findHeadInNode(child, source);
-                if (found)
-                    return found;
-            }
-        }
-    }
-    return null;
-}

package/dist/preprocessor/transformer.d.ts

@@ -1,18 +0,0 @@
-import { type TailwindConfig } from 'tw-to-css';
-import type { TransformResult, MediaQueryStyle } from './types.js';
-/**
- * Initialize Tailwind converter with config
- */
-export declare function createTailwindConverter(config?: TailwindConfig): typeof import("tw-to-css").twi;
-/**
- * Transform Tailwind classes to inline styles and responsive classes
- */
-export declare function transformTailwindClasses(classString: string, tailwindConverter: ReturnType<typeof createTailwindConverter>): TransformResult;
-/**
- * Generate media query CSS for responsive classes
- */
-export declare function generateMediaQueries(responsiveClasses: string[], tailwindConverter: ReturnType<typeof createTailwindConverter>, tailwindConfig?: TailwindConfig): MediaQueryStyle[];
-/**
- * Sanitize class names for use in CSS (replace special characters)
- */
-export declare function sanitizeClassName(className: string): string;