seblify 0.2.0 → 0.3.0

package/dist/components/display/typography/code-snippet/tokenize.js

@@ -0,0 +1,352 @@
+const javascriptKeywordPattern = /\b(?:as|async|await|break|case|catch|class|const|continue|default|delete|do|else|enum|export|extends|false|finally|for|from|function|if|implements|import|in|instanceof|interface|let|new|null|of|private|protected|public|return|static|super|switch|this|throw|true|try|type|typeof|undefined|var|void|while|with|yield)\b/y;
+const javascriptNumberPattern = /\b(?:0x[\da-fA-F]+|0b[01]+|0o[0-7]+|\d+(?:\.\d+)?)\b/y;
+const javascriptPunctuationPattern = /[()[\]{}.,:;=+\-*/%!?<>|&~^]+/y;
+const tokenizers = {
+    svelte: tokenizeSvelte,
+};
+export function tokenizeCode(source, language = 'svelte') {
+    const normalizedSource = source.replace(/\r\n?/g, '\n');
+    const tokenizer = tokenizers[language] ?? tokenizePlainText;
+    return splitTokensIntoLines(tokenizer(normalizedSource));
+}
+function tokenizePlainText(source) {
+    return [{ text: source, type: 'plain' }];
+}
+function tokenizeSvelte(source) {
+    const tokens = [];
+    let cursor = 0;
+    while (cursor < source.length) {
+        if (source.startsWith('<!--', cursor)) {
+            const commentEnd = source.indexOf('-->', cursor + 4);
+            const endIndex = commentEnd === -1 ? source.length : commentEnd + 3;
+            pushToken(tokens, source.slice(cursor, endIndex), 'comment');
+            cursor = endIndex;
+            continue;
+        }
+        if (source[cursor] === '<') {
+            if (isTagStart(source, cursor)) {
+                cursor = tokenizeMarkupTag(source, cursor, tokens);
+                continue;
+            }
+        }
+        if (source[cursor] === '{') {
+            cursor = tokenizeSvelteExpression(source, cursor, tokens);
+            continue;
+        }
+        const nextMarkup = source.indexOf('<', cursor);
+        const nextExpression = source.indexOf('{', cursor);
+        const nextIndex = minPositive(nextMarkup, nextExpression, source.length);
+        pushToken(tokens, source.slice(cursor, nextIndex), 'plain');
+        cursor = nextIndex;
+    }
+    return tokens;
+}
+function isTagStart(source, index) {
+    const next = source[index + 1];
+    return next !== undefined && /[A-Za-z!/]/.test(next);
+}
+function tokenizeMarkupTag(source, startIndex, tokens) {
+    let cursor = startIndex;
+    const closingTag = source[cursor + 1] === '/';
+    if (closingTag) {
+        pushToken(tokens, '</', 'punctuation');
+        cursor += 2;
+    }
+    else {
+        pushToken(tokens, '<', 'punctuation');
+        cursor += 1;
+    }
+    const tagNameStart = cursor;
+    while (cursor < source.length && /[\w:-]/.test(source[cursor] ?? '')) {
+        cursor += 1;
+    }
+    const tagName = source.slice(tagNameStart, cursor);
+    pushToken(tokens, tagName, 'tag');
+    const lowerTagName = tagName.toLowerCase();
+    while (cursor < source.length) {
+        if (source.startsWith('/>', cursor)) {
+            pushToken(tokens, '/>', 'punctuation');
+            return cursor + 2;
+        }
+        if (source[cursor] === '>') {
+            pushToken(tokens, '>', 'punctuation');
+            cursor += 1;
+            if (!closingTag && lowerTagName === 'script') {
+                return tokenizeRawBlock(source, cursor, tokens, 'script');
+            }
+            if (!closingTag && lowerTagName === 'style') {
+                return tokenizeRawBlock(source, cursor, tokens, 'style');
+            }
+            return cursor;
+        }
+        if (/\s/.test(source[cursor] ?? '')) {
+            const whitespaceStart = cursor;
+            while (cursor < source.length && /\s/.test(source[cursor] ?? '')) {
+                cursor += 1;
+            }
+            pushToken(tokens, source.slice(whitespaceStart, cursor), 'plain');
+            continue;
+        }
+        if (source[cursor] === '{') {
+            cursor = tokenizeSvelteExpression(source, cursor, tokens);
+            continue;
+        }
+        const attributeStart = cursor;
+        while (cursor < source.length &&
+            !/[\s=/>]/.test(source[cursor] ?? '')) {
+            cursor += 1;
+        }
+        const attributeName = source.slice(attributeStart, cursor);
+        pushToken(tokens, attributeName, isDirectiveName(attributeName) ? 'directive' : 'attribute');
+        if (source[cursor] === '=') {
+            pushToken(tokens, '=', 'punctuation');
+            cursor += 1;
+            if (source[cursor] === '"' || source[cursor] === "'") {
+                const stringEnd = scanQuotedString(source, cursor);
+                pushToken(tokens, source.slice(cursor, stringEnd), 'string');
+                cursor = stringEnd;
+                continue;
+            }
+            if (source[cursor] === '{') {
+                cursor = tokenizeSvelteExpression(source, cursor, tokens);
+                continue;
+            }
+            const valueStart = cursor;
+            while (cursor < source.length && !/[\s>]/.test(source[cursor] ?? '')) {
+                cursor += 1;
+            }
+            pushToken(tokens, source.slice(valueStart, cursor), 'string');
+        }
+    }
+    return cursor;
+}
+function tokenizeRawBlock(source, startIndex, tokens, type) {
+    const closingTag = `</${type}>`;
+    const closingIndex = source.toLowerCase().indexOf(closingTag, startIndex);
+    const contentEnd = closingIndex === -1 ? source.length : closingIndex;
+    const content = source.slice(startIndex, contentEnd);
+    if (content) {
+        const embeddedTokens = type === 'script' ? tokenizeJavaScript(content) : tokenizeStyle(content);
+        for (const token of embeddedTokens) {
+            pushToken(tokens, token.text, token.type);
+        }
+    }
+    if (closingIndex !== -1) {
+        return tokenizeMarkupTag(source, closingIndex, tokens);
+    }
+    return contentEnd;
+}
+function tokenizeSvelteExpression(source, startIndex, tokens) {
+    pushToken(tokens, '{', 'punctuation');
+    const directiveMatch = /^([#/:@][\w-]+)/.exec(source.slice(startIndex + 1));
+    let cursor = startIndex + 1;
+    if (directiveMatch) {
+        pushToken(tokens, directiveMatch[1], 'directive');
+        cursor += directiveMatch[1].length;
+    }
+    const closingIndex = findMatchingBrace(source, startIndex);
+    const contentEnd = closingIndex === -1 ? source.length : closingIndex;
+    const expressionContent = source.slice(cursor, contentEnd);
+    if (expressionContent) {
+        const expressionTokens = tokenizeJavaScript(expressionContent);
+        for (const token of expressionTokens) {
+            pushToken(tokens, token.text, token.type);
+        }
+    }
+    if (closingIndex !== -1) {
+        pushToken(tokens, '}', 'punctuation');
+        return closingIndex + 1;
+    }
+    return source.length;
+}
+function tokenizeJavaScript(source) {
+    const rules = [
+        { regex: javascriptKeywordPattern, type: 'keyword' },
+        { regex: javascriptNumberPattern, type: 'number' },
+        { regex: javascriptPunctuationPattern, type: 'punctuation' },
+    ];
+    return tokenizeStructuredCode(source, rules);
+}
+function tokenizeStyle(source) {
+    const rules = [
+        { regex: javascriptNumberPattern, type: 'number' },
+        { regex: javascriptPunctuationPattern, type: 'punctuation' },
+    ];
+    return tokenizeStructuredCode(source, rules);
+}
+function tokenizeStructuredCode(source, rules) {
+    const tokens = [];
+    let cursor = 0;
+    while (cursor < source.length) {
+        if (source.startsWith('//', cursor)) {
+            const commentEnd = indexOfLineBreak(source, cursor);
+            pushToken(tokens, source.slice(cursor, commentEnd), 'comment');
+            cursor = commentEnd;
+            continue;
+        }
+        if (source.startsWith('/*', cursor)) {
+            const commentEnd = source.indexOf('*/', cursor + 2);
+            const endIndex = commentEnd === -1 ? source.length : commentEnd + 2;
+            pushToken(tokens, source.slice(cursor, endIndex), 'comment');
+            cursor = endIndex;
+            continue;
+        }
+        if (source[cursor] === '"' ||
+            source[cursor] === "'" ||
+            source[cursor] === '`') {
+            const stringEnd = scanQuotedString(source, cursor);
+            pushToken(tokens, source.slice(cursor, stringEnd), 'string');
+            cursor = stringEnd;
+            continue;
+        }
+        let matchedRule = false;
+        for (const rule of rules) {
+            rule.regex.lastIndex = cursor;
+            const match = rule.regex.exec(source);
+            if (!match || match.index !== cursor || !match[0]) {
+                continue;
+            }
+            pushToken(tokens, match[0], rule.type);
+            cursor += match[0].length;
+            matchedRule = true;
+            break;
+        }
+        if (matchedRule) {
+            continue;
+        }
+        const nextStructuredIndex = findNextStructuredIndex(source, cursor);
+        if (nextStructuredIndex === cursor) {
+            pushToken(tokens, source[cursor], 'plain');
+            cursor += 1;
+            continue;
+        }
+        pushToken(tokens, source.slice(cursor, nextStructuredIndex), 'plain');
+        cursor = nextStructuredIndex;
+    }
+    return tokens;
+}
+function findMatchingBrace(source, braceIndex) {
+    let depth = 0;
+    let cursor = braceIndex;
+    while (cursor < source.length) {
+        if (source.startsWith('//', cursor)) {
+            cursor = indexOfLineBreak(source, cursor);
+            continue;
+        }
+        if (source.startsWith('/*', cursor)) {
+            const commentEnd = source.indexOf('*/', cursor + 2);
+            cursor = commentEnd === -1 ? source.length : commentEnd + 2;
+            continue;
+        }
+        if (source[cursor] === '"' ||
+            source[cursor] === "'" ||
+            source[cursor] === '`') {
+            cursor = scanQuotedString(source, cursor);
+            continue;
+        }
+        if (source[cursor] === '{') {
+            depth += 1;
+            cursor += 1;
+            continue;
+        }
+        if (source[cursor] === '}') {
+            depth -= 1;
+            if (depth === 0) {
+                return cursor;
+            }
+            cursor += 1;
+            continue;
+        }
+        cursor += 1;
+    }
+    return -1;
+}
+function scanQuotedString(source, startIndex) {
+    const quote = source[startIndex];
+    let cursor = startIndex + 1;
+    while (cursor < source.length) {
+        if (source[cursor] === '\\') {
+            cursor += 2;
+            continue;
+        }
+        if (quote === '`' && source[cursor] === '$' && source[cursor + 1] === '{') {
+            const expressionEnd = findMatchingBrace(source, cursor + 1);
+            cursor = expressionEnd === -1 ? source.length : expressionEnd + 1;
+            continue;
+        }
+        if (source[cursor] === quote) {
+            return cursor + 1;
+        }
+        cursor += 1;
+    }
+    return source.length;
+}
+function findNextStructuredIndex(source, startIndex) {
+    let cursor = startIndex;
+    while (cursor < source.length) {
+        if (source.startsWith('//', cursor) ||
+            source.startsWith('/*', cursor) ||
+            source[cursor] === '"' ||
+            source[cursor] === "'" ||
+            source[cursor] === '`' ||
+            /[()[\]{}.,:;=+\-*/%!?<>|&~^\d]/.test(source[cursor] ?? '')) {
+            return cursor;
+        }
+        javascriptKeywordPattern.lastIndex = cursor;
+        if (javascriptKeywordPattern.exec(source)?.index === cursor) {
+            return cursor;
+        }
+        cursor += 1;
+    }
+    return source.length;
+}
+function isDirectiveName(value) {
+    return value.includes(':') || value.startsWith('#');
+}
+function pushToken(tokens, text, type) {
+    if (!text) {
+        return;
+    }
+    const previousToken = tokens.at(-1);
+    if (previousToken && previousToken.type === type) {
+        previousToken.text += text;
+        return;
+    }
+    tokens.push({ text, type });
+}
+function splitTokensIntoLines(tokens) {
+    const lines = [{ number: 1, tokens: [] }];
+    for (const token of tokens) {
+        const segments = token.text.split('\n');
+        for (let index = 0; index < segments.length; index += 1) {
+            const segment = segments[index];
+            if (segment.length > 0) {
+                lines.at(-1)?.tokens.push({
+                    text: segment,
+                    type: token.type,
+                });
+            }
+            if (index < segments.length - 1) {
+                lines.push({
+                    number: lines.length + 1,
+                    tokens: [],
+                });
+            }
+        }
+    }
+    return lines;
+}
+function minPositive(...values) {
+    let smallest = Number.POSITIVE_INFINITY;
+    for (const value of values) {
+        if (value < 0) {
+            continue;
+        }
+        smallest = Math.min(smallest, value);
+    }
+    return Number.isFinite(smallest) ? smallest : -1;
+}
+function indexOfLineBreak(source, startIndex) {
+    const lineBreakIndex = source.indexOf('\n', startIndex);
+    return lineBreakIndex === -1 ? source.length : lineBreakIndex;
+}

package/dist/components/framework/layout/container/app-shell/AppShell.svelte

@@ -9,7 +9,7 @@
     sidebarWidth?: string;
   }>;
 
-  let { children, header, sidebar, sidebarWidth = '280px' }: Props = $props();
+  let { children, header, sidebar, sidebarWidth = 'max-content' }: Props = $props();
 </script>
 
 <div class="app-shell" style:--app-shell-sidebar-width={sidebarWidth}>