juxscript 1.1.43 → 1.1.44

package/lib/components/code.d.ts

@@ -2,22 +2,48 @@ import { BaseComponent } from './base/BaseComponent.js';
 export interface CodeOptions {
     content?: string;
     language?: string;
+    showLineNumbers?: boolean;
+    startLine?: number;
+    highlightLines?: number[];
     style?: string;
     class?: string;
 }
 type CodeState = {
     content: string;
     language: string;
+    showLineNumbers: boolean;
+    startLine: number;
+    highlightLines: number[];
     style: string;
     class: string;
 };
 export declare class Code extends BaseComponent<CodeState> {
+    private _codeContainer;
     constructor(id: string, options?: CodeOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
     update(prop: string, value: any): void;
     content(value: string): this;
     language(value: string): this;
+    showLineNumbers(value: boolean): this;
+    startLine(value: number): this;
+    highlightLines(lines: number[]): this;
+    /**
+     * Parse code content into individual lines
+     */
+    private _parseLines;
+    /**
+     * Rebuild all line elements
+     */
+    private _rebuildLines;
+    /**
+     * Create a single line element
+     */
+    private _createLineElement;
+    /**
+     * Update highlighted lines without full rebuild
+     */
+    private _updateHighlights;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }
 export declare function code(id: string, options?: CodeOptions): Code;

package/lib/components/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IASjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAmEnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,cAAc,CAA4B;gBAEtC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAYjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsBtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IASrC;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,aAAa;IAyBrB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0B1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA6EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/code.js

@@ -7,9 +7,13 @@ export class Code extends BaseComponent {
         super(id, {
             content: options.content ?? '',
             language: options.language ?? 'javascript',
+            showLineNumbers: options.showLineNumbers ?? true,
+            startLine: options.startLine ?? 1,
+            highlightLines: options.highlightLines ?? [],
             style: options.style ?? '',
             class: options.class ?? ''
         });
+        this._codeContainer = null;
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -18,7 +22,20 @@ export class Code extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     update(prop, value) {
-        // No reactive updates needed
+        super.update(prop, value);
+        if (!this._codeContainer)
+            return;
+        switch (prop) {
+            case 'content':
+                this._rebuildLines();
+                break;
+            case 'showLineNumbers':
+                this._codeContainer.classList.toggle('jux-code-no-numbers', !value);
+                break;
+            case 'highlightLines':
+                this._updateHighlights();
+                break;
+        }
     }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
@@ -31,23 +48,115 @@ export class Code extends BaseComponent {
         this.state.language = value;
         return this;
     }
+    showLineNumbers(value) {
+        this.state.showLineNumbers = value;
+        return this;
+    }
+    startLine(value) {
+        this.state.startLine = value;
+        return this;
+    }
+    highlightLines(lines) {
+        this.state.highlightLines = lines;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PARSING & RENDERING
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Parse code content into individual lines
+     */
+    _parseLines() {
+        return this.state.content.split('\n');
+    }
+    /**
+     * Rebuild all line elements
+     */
+    _rebuildLines() {
+        if (!this._codeContainer)
+            return;
+        const codeEl = this._codeContainer.querySelector('.jux-code-lines');
+        if (!codeEl)
+            return;
+        codeEl.innerHTML = '';
+        const lines = this._parseLines();
+        const { startLine, highlightLines, showLineNumbers } = this.state;
+        lines.forEach((lineContent, index) => {
+            const lineNumber = startLine + index;
+            const isHighlighted = highlightLines.includes(lineNumber);
+            const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+            codeEl.appendChild(lineEl);
+        });
+        // Re-run Prism if available
+        if (window.Prism && this._codeContainer) {
+            window.Prism.highlightAllUnder(this._codeContainer);
+        }
+    }
+    /**
+     * Create a single line element
+     */
+    _createLineElement(content, lineNumber, highlighted) {
+        const lineEl = document.createElement('div');
+        lineEl.className = 'jux-code-line';
+        lineEl.setAttribute('data-line', String(lineNumber));
+        if (highlighted) {
+            lineEl.classList.add('jux-code-line-highlight');
+        }
+        // Line number
+        if (this.state.showLineNumbers) {
+            const lineNum = document.createElement('span');
+            lineNum.className = 'jux-code-line-number';
+            lineNum.textContent = String(lineNumber);
+            lineEl.appendChild(lineNum);
+        }
+        // Line content
+        const lineCode = document.createElement('span');
+        lineCode.className = `jux-code-line-content language-${this.state.language}`;
+        lineCode.textContent = content || ' '; // Preserve empty lines
+        lineEl.appendChild(lineCode);
+        return lineEl;
+    }
+    /**
+     * Update highlighted lines without full rebuild
+     */
+    _updateHighlights() {
+        if (!this._codeContainer)
+            return;
+        const lines = this._codeContainer.querySelectorAll('.jux-code-line');
+        lines.forEach((line) => {
+            const lineNum = parseInt(line.getAttribute('data-line') || '0', 10);
+            const isHighlighted = this.state.highlightLines.includes(lineNum);
+            line.classList.toggle('jux-code-line-highlight', isHighlighted);
+        });
+    }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { content, language, style, class: className } = this.state;
+        const { language, showLineNumbers, style, class: className } = this.state;
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-code';
         wrapper.id = this._id;
+        if (!showLineNumbers)
+            wrapper.classList.add('jux-code-no-numbers');
         if (className)
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
         const pre = document.createElement('pre');
+        pre.className = `language-${language}`;
         const codeEl = document.createElement('code');
-        codeEl.className = `language-${language}`;
-        codeEl.textContent = content;
+        codeEl.className = 'jux-code-lines';
+        // Build initial lines
+        const lines = this._parseLines();
+        const { startLine, highlightLines } = this.state;
+        lines.forEach((lineContent, index) => {
+            const lineNumber = startLine + index;
+            const isHighlighted = highlightLines.includes(lineNumber);
+            const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+            codeEl.appendChild(lineEl);
+        });
         pre.appendChild(codeEl);
         wrapper.appendChild(pre);
         this._wireStandardEvents(wrapper);
@@ -57,35 +166,33 @@ export class Code extends BaseComponent {
                 const transform = toComponent || ((v) => String(v));
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
-                    codeEl.textContent = transformed;
                     this.state.content = transformed;
-                    if (window.Prism) {
-                        window.Prism.highlightElement(codeEl);
-                    }
+                    this._rebuildLines();
                 });
             }
             else if (property === 'language') {
                 const transform = toComponent || ((v) => String(v));
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
-                    codeEl.className = `language-${transformed}`;
                     this.state.language = transformed;
-                    if (window.Prism) {
-                        window.Prism.highlightElement(codeEl);
-                    }
+                    pre.className = `language-${transformed}`;
+                    this._rebuildLines();
+                });
+            }
+            else if (property === 'highlightLines') {
+                const transform = toComponent || ((v) => (Array.isArray(v) ? v : []));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    this.state.highlightLines = transformed;
+                    this._updateHighlights();
                 });
             }
         });
         container.appendChild(wrapper);
+        this._codeContainer = wrapper;
         requestAnimationFrame(() => {
             if (window.Prism) {
-                window.Prism.highlightElement(codeEl);
-            }
-            else if (process.env.NODE_ENV !== 'production') {
-                // ✅ Helpful hint in development
-                console.log(`💡 Tip: Add Prism.js for syntax highlighting:\n` +
-                    `   <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" rel="stylesheet" />\n` +
-                    `   <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>`);
+                window.Prism.highlightAllUnder(wrapper);
             }
         });
         return this;

package/lib/components/code.ts

@@ -7,6 +7,9 @@ const CALLBACK_EVENTS = [] as const;
 export interface CodeOptions {
   content?: string;
   language?: string;
+  showLineNumbers?: boolean;
+  startLine?: number;
+  highlightLines?: number[];
   style?: string;
   class?: string;
 }
@@ -14,15 +17,23 @@ export interface CodeOptions {
 type CodeState = {
   content: string;
   language: string;
+  showLineNumbers: boolean;
+  startLine: number;
+  highlightLines: number[];
   style: string;
   class: string;
 };
 
 export class Code extends BaseComponent<CodeState> {
+  private _codeContainer: HTMLElement | null = null;
+
   constructor(id: string, options: CodeOptions = {}) {
     super(id, {
       content: options.content ?? '',
       language: options.language ?? 'javascript',
+      showLineNumbers: options.showLineNumbers ?? true,
+      startLine: options.startLine ?? 1,
+      highlightLines: options.highlightLines ?? [],
       style: options.style ?? '',
       class: options.class ?? ''
     });
@@ -37,7 +48,21 @@ export class Code extends BaseComponent<CodeState> {
   }
 
   update(prop: string, value: any): void {
-    // No reactive updates needed
+    super.update(prop, value);
+
+    if (!this._codeContainer) return;
+
+    switch (prop) {
+      case 'content':
+        this._rebuildLines();
+        break;
+      case 'showLineNumbers':
+        this._codeContainer.classList.toggle('jux-code-no-numbers', !value);
+        break;
+      case 'highlightLines':
+        this._updateHighlights();
+        break;
+    }
   }
 
   /* ═════════════════════════════════════════════════════════════════
@@ -54,6 +79,103 @@ export class Code extends BaseComponent<CodeState> {
     return this;
   }
 
+  showLineNumbers(value: boolean): this {
+    this.state.showLineNumbers = value;
+    return this;
+  }
+
+  startLine(value: number): this {
+    this.state.startLine = value;
+    return this;
+  }
+
+  highlightLines(lines: number[]): this {
+    this.state.highlightLines = lines;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * PARSING & RENDERING
+   * ═════════════════════════════════════════════════════════════════ */
+
+  /**
+   * Parse code content into individual lines
+   */
+  private _parseLines(): string[] {
+    return this.state.content.split('\n');
+  }
+
+  /**
+   * Rebuild all line elements
+   */
+  private _rebuildLines(): void {
+    if (!this._codeContainer) return;
+
+    const codeEl = this._codeContainer.querySelector('.jux-code-lines');
+    if (!codeEl) return;
+
+    codeEl.innerHTML = '';
+
+    const lines = this._parseLines();
+    const { startLine, highlightLines, showLineNumbers } = this.state;
+
+    lines.forEach((lineContent, index) => {
+      const lineNumber = startLine + index;
+      const isHighlighted = highlightLines.includes(lineNumber);
+
+      const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+      codeEl.appendChild(lineEl);
+    });
+
+    // Re-run Prism if available
+    if ((window as any).Prism && this._codeContainer) {
+      (window as any).Prism.highlightAllUnder(this._codeContainer);
+    }
+  }
+
+  /**
+   * Create a single line element
+   */
+  private _createLineElement(content: string, lineNumber: number, highlighted: boolean): HTMLElement {
+    const lineEl = document.createElement('div');
+    lineEl.className = 'jux-code-line';
+    lineEl.setAttribute('data-line', String(lineNumber));
+
+    if (highlighted) {
+      lineEl.classList.add('jux-code-line-highlight');
+    }
+
+    // Line number
+    if (this.state.showLineNumbers) {
+      const lineNum = document.createElement('span');
+      lineNum.className = 'jux-code-line-number';
+      lineNum.textContent = String(lineNumber);
+      lineEl.appendChild(lineNum);
+    }
+
+    // Line content
+    const lineCode = document.createElement('span');
+    lineCode.className = `jux-code-line-content language-${this.state.language}`;
+    lineCode.textContent = content || ' '; // Preserve empty lines
+    lineEl.appendChild(lineCode);
+
+    return lineEl;
+  }
+
+  /**
+   * Update highlighted lines without full rebuild
+   */
+  private _updateHighlights(): void {
+    if (!this._codeContainer) return;
+
+    const lines = this._codeContainer.querySelectorAll('.jux-code-line');
+    lines.forEach((line) => {
+      const lineNum = parseInt(line.getAttribute('data-line') || '0', 10);
+      const isHighlighted = this.state.highlightLines.includes(lineNum);
+      line.classList.toggle('jux-code-line-highlight', isHighlighted);
+    });
+  }
+
   /* ═════════════════════════════════════════════════════════════════
    * RENDER
    * ═════════════════════════════════════════════════════════════════ */
@@ -61,18 +183,32 @@ export class Code extends BaseComponent<CodeState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { content, language, style, class: className } = this.state;
+    const { language, showLineNumbers, style, class: className } = this.state;
 
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-code';
     wrapper.id = this._id;
+    if (!showLineNumbers) wrapper.classList.add('jux-code-no-numbers');
     if (className) wrapper.className += ` ${className}`;
     if (style) wrapper.setAttribute('style', style);
 
     const pre = document.createElement('pre');
+    pre.className = `language-${language}`;
+
     const codeEl = document.createElement('code');
-    codeEl.className = `language-${language}`;
-    codeEl.textContent = content;
+    codeEl.className = 'jux-code-lines';
+
+    // Build initial lines
+    const lines = this._parseLines();
+    const { startLine, highlightLines } = this.state;
+
+    lines.forEach((lineContent, index) => {
+      const lineNumber = startLine + index;
+      const isHighlighted = highlightLines.includes(lineNumber);
+      const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+      codeEl.appendChild(lineEl);
+    });
+
     pre.appendChild(codeEl);
     wrapper.appendChild(pre);
 
@@ -85,12 +221,8 @@ export class Code extends BaseComponent<CodeState> {
 
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
-          codeEl.textContent = transformed;
           this.state.content = transformed;
-
-          if ((window as any).Prism) {
-            (window as any).Prism.highlightElement(codeEl);
-          }
+          this._rebuildLines();
         });
       }
       else if (property === 'language') {
@@ -98,28 +230,28 @@ export class Code extends BaseComponent<CodeState> {
 
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
-          codeEl.className = `language-${transformed}`;
           this.state.language = transformed;
+          pre.className = `language-${transformed}`;
+          this._rebuildLines();
+        });
+      }
+      else if (property === 'highlightLines') {
+        const transform = toComponent || ((v: any) => (Array.isArray(v) ? v : []));
 
-          if ((window as any).Prism) {
-            (window as any).Prism.highlightElement(codeEl);
-          }
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.highlightLines = transformed;
+          this._updateHighlights();
         });
       }
     });
 
     container.appendChild(wrapper);
+    this._codeContainer = wrapper;
 
     requestAnimationFrame(() => {
       if ((window as any).Prism) {
-        (window as any).Prism.highlightElement(codeEl);
-      } else if (process.env.NODE_ENV !== 'production') {
-        // ✅ Helpful hint in development
-        console.log(
-          `💡 Tip: Add Prism.js for syntax highlighting:\n` +
-          `   <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" rel="stylesheet" />\n` +
-          `   <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>`
-        );
+        (window as any).Prism.highlightAllUnder(wrapper);
       }
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.43",
+  "version": "1.1.44",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",