@gannochenko/staticstripes 0.0.1

package/src/ffprobe.ts

@@ -0,0 +1,29 @@
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+
+const execFileAsync = promisify(execFile);
+
+export const getAssetDuration = async (path: string): Promise<number> => {
+  try {
+    const { stdout } = await execFileAsync('ffprobe', [
+      '-v',
+      'error',
+      '-show_entries',
+      'format=duration',
+      '-of',
+      'default=noprint_wrappers=1:nokey=1',
+      path,
+    ]);
+
+    const durationSeconds = parseFloat(stdout.trim());
+    if (isNaN(durationSeconds)) {
+      console.warn(`Could not parse duration for asset: ${path}`);
+      return 0;
+    }
+
+    return Math.round(durationSeconds * 1000);
+  } catch (error) {
+    console.error(`Failed to get duration for asset: ${path}`, error);
+    return 0;
+  }
+};

package/src/html-parser.ts

@@ -0,0 +1,221 @@
+import { parse, type DefaultTreeAdapterMap } from 'parse5';
+import { readFile } from 'fs/promises';
+import * as csstree from 'css-tree';
+import { CSSProperties, ParsedHtml } from './type';
+
+export type ASTNode = DefaultTreeAdapterMap['node'];
+export type Document = DefaultTreeAdapterMap['document'];
+export type Element = DefaultTreeAdapterMap['element'];
+// export type Attribute = DefaultTreeAdapterMap['attribute'];
+
+export interface EnhancedElement extends Element {
+  computedStyles?: CSSProperties;
+}
+
+interface StyleRule {
+  selector: string;
+  properties: CSSProperties;
+}
+
+export class HTMLParser {
+  /**
+   * Parses an HTML file into an AST with computed CSS using parse5 and css-tree
+   * @param filePath - Absolute or relative path to the HTML file
+   * @returns Promise resolving to the parsed project with AST and computed styles
+   */
+  public async parseFile(filePath: string): Promise<ParsedHtml> {
+    const content = await readFile(filePath, 'utf-8');
+    return this.parse(content);
+  }
+
+  /**
+   * Parses HTML string into an AST with computed CSS
+   * @param html - HTML string to parse
+   * @returns The parsed project with AST and computed styles
+   */
+  public parse(html: string): ParsedHtml {
+    const ast = parse(html);
+    const cssText = this.extractCSS(ast);
+    const cssRules = csstree.parse(cssText);
+    const elements = new Map<Element, CSSProperties>();
+
+    // Build the CSS rule map
+    const styleRules = this.buildStyleRules(cssRules);
+
+    // Apply styles to all elements
+    this.traverseAndApplyStyles(ast, styleRules, elements);
+
+    return { ast, css: elements, cssText };
+  }
+
+  /**
+   * Extracts CSS text from <style> elements in the document
+   */
+  private extractCSS(ast: Document): string {
+    const styleElements = findElementsByTagName(ast, 'style');
+    return styleElements.map((el) => getTextContent(el)).join('\n');
+  }
+
+  /**
+   * Builds a map of CSS rules from the parsed CSS AST
+   */
+  private buildStyleRules(cssAst: csstree.CssNode): StyleRule[] {
+    const rules: StyleRule[] = [];
+
+    csstree.walk(cssAst, {
+      visit: 'Rule',
+      enter: (node) => {
+        const rule = node as csstree.Rule;
+        const selector = csstree.generate(rule.prelude);
+        const properties: CSSProperties = {};
+
+        csstree.walk(rule.block, {
+          visit: 'Declaration',
+          enter: (declNode) => {
+            const decl = declNode as csstree.Declaration;
+            const property = decl.property;
+            const value = csstree.generate(decl.value);
+            properties[property] = value;
+          },
+        });
+
+        rules.push({ selector, properties });
+      },
+    });
+
+    return rules;
+  }
+
+  /**
+   * Gets the class attribute value from an element
+   */
+  private getClassNames(element: Element): string[] {
+    const classAttr = element.attrs.find((attr) => attr.name === 'class');
+    return classAttr ? classAttr.value.split(/\s+/).filter(Boolean) : [];
+  }
+
+  /**
+   * Checks if an element matches a CSS selector (simplified implementation)
+   */
+  private matchesSelector(element: Element, selector: string): boolean {
+    const trimmedSelector = selector.trim();
+
+    // Class selector
+    if (trimmedSelector.startsWith('.')) {
+      const className = trimmedSelector.slice(1);
+      return this.getClassNames(element).includes(className);
+    }
+
+    // Tag selector
+    if (/^[a-z]+$/i.test(trimmedSelector)) {
+      return element.tagName === trimmedSelector;
+    }
+
+    // ID selector (basic support)
+    if (trimmedSelector.startsWith('#')) {
+      const id = trimmedSelector.slice(1);
+      const idAttr = element.attrs.find((attr) => attr.name === 'id');
+      return idAttr?.value === id;
+    }
+
+    return false;
+  }
+
+  /**
+   * Applies CSS rules to all elements in the AST
+   */
+  private traverseAndApplyStyles(
+    node: ASTNode,
+    styleRules: StyleRule[],
+    elementsMap: Map<Element, CSSProperties>,
+  ): void {
+    const traverse = (currentNode: ASTNode) => {
+      if ('tagName' in currentNode) {
+        const element = currentNode as Element;
+        const computedStyles: CSSProperties = {};
+
+        // Apply matching rules
+        for (const rule of styleRules) {
+          if (this.matchesSelector(element, rule.selector)) {
+            Object.assign(computedStyles, rule.properties);
+          }
+        }
+
+        elementsMap.set(element, computedStyles);
+      }
+
+      if ('childNodes' in currentNode && currentNode.childNodes) {
+        for (const child of currentNode.childNodes) {
+          traverse(child);
+        }
+      }
+    };
+
+    traverse(node);
+  }
+}
+
+/**
+ * Helper to find elements by tag name in the AST
+ * @param node - Starting node to search from
+ * @param tagName - Tag name to search for
+ * @returns Array of matching element nodes
+ */
+export function findElementsByTagName(
+  node: ASTNode,
+  tagName: string,
+): Element[] {
+  const results: Element[] = [];
+
+  function traverse(currentNode: ASTNode) {
+    if ('tagName' in currentNode && currentNode.tagName === tagName) {
+      results.push(currentNode as Element);
+    }
+
+    if ('childNodes' in currentNode && currentNode.childNodes) {
+      for (const child of currentNode.childNodes) {
+        traverse(child);
+      }
+    }
+  }
+
+  traverse(node);
+  return results;
+}
+
+/**
+ * Helper to get text content from a node
+ * @param node - Node to extract text from
+ * @returns Concatenated text content
+ */
+export function getTextContent(node: ASTNode): string {
+  let text = '';
+
+  function traverse(currentNode: ASTNode) {
+    if ('value' in currentNode && typeof currentNode.value === 'string') {
+      text += currentNode.value;
+    }
+
+    if ('childNodes' in currentNode && currentNode.childNodes) {
+      for (const child of currentNode.childNodes) {
+        traverse(child);
+      }
+    }
+  }
+
+  traverse(node);
+  return text;
+}
+
+// /**
+//  * Helper to get computed styles for an element
+//  * @param element - Element to get styles for
+//  * @param elementsMap - Map of elements to their computed styles
+//  * @returns Computed styles for the element
+//  */
+// export function getComputedStyles(
+//   element: Element,
+//   elementsMap: Map<Element, CSSProperties>,
+// ): CSSProperties {
+//   return elementsMap.get(element) || {};
+// }