From 60c92958c7278c1da536d97ef3b135f864e56f67 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:19:14 -0400 Subject: [PATCH 001/125] wip --- BENCHMARK_BASELINE.md | 18 + CLAUDE.md | 155 +++++++++ README.md | 6 +- TODO_HIGHLIGHT.md | 115 +++++++ TODO_RESTRUCTURE.md | 256 ++++++++++++++ package-lock.json | 19 +- package.json | 154 ++++++--- src/fixtures/css_custom_highlight_api.md | 104 ++++++ src/fixtures/custom_highlight_api.md | 237 +++++++++++++ src/fixtures/highlight.md | 111 ++++++ src/fixtures/styled_html_outputs/css.html | 35 ++ src/fixtures/styled_html_outputs/html.html | 34 ++ src/fixtures/styled_html_outputs/json.html | 9 + src/fixtures/styled_html_outputs/svelte.html | 168 +++++++++ src/fixtures/styled_html_outputs/ts.html | 62 ++++ .../{Code.svelte => Domstyler_Code.svelte} | 10 +- src/lib/Rangestyler_Code.svelte | 64 ++++ src/lib/benchmark.ts | 79 +++++ src/lib/code_sample_inputs.ts | 239 ------------- src/lib/code_sample_outputs.ts | 14 - src/lib/code_samples.ts | 45 +++ src/lib/domstyler.test.ts | 36 ++ src/lib/{syntax_styler.ts => domstyler.ts} | 38 +-- src/lib/domstyler_global.ts | 18 + ...ammar_clike.ts => domstyler_lang_clike.ts} | 8 +- .../{grammar_css.ts => domstyler_lang_css.ts} | 19 +- ...ammar_markup.ts => domstyler_lang_html.ts} | 36 +- .../{grammar_js.ts => domstyler_lang_js.ts} | 41 +-- ...grammar_json.ts => domstyler_lang_json.ts} | 8 +- ...mar_svelte.ts => domstyler_lang_svelte.ts} | 39 +-- .../{grammar_ts.ts => domstyler_lang_ts.ts} | 18 +- src/lib/{theme.css => domstyler_theme.css} | 0 ...one.css => domstyler_theme_standalone.css} | 0 src/lib/index.ts | 18 - src/lib/rangestyler.ts | 129 +++++++ src/lib/rangestyler_builder.ts | 239 +++++++++++++ src/lib/rangestyler_global.ts | 14 + src/lib/rangestyler_lang_css.ts | 110 ++++++ src/lib/rangestyler_lang_html.ts | 89 +++++ src/lib/rangestyler_lang_json.ts | 73 ++++ src/lib/rangestyler_lang_svelte.ts | 121 +++++++ src/lib/rangestyler_lang_ts.ts | 108 ++++++ src/lib/rangestyler_theme.css | 241 +++++++++++++ src/lib/rangestyler_types.ts | 21 ++ src/lib/run_benchmark.ts | 13 + src/lib/samples/all.gen.ts | 35 ++ src/lib/samples/all.ts | 319 ++++++++++++++++++ src/lib/samples/sample.css | 35 ++ src/lib/samples/sample.html | 34 ++ src/lib/samples/sample.json | 9 + src/lib/samples/sample.svelte | 168 +++++++++ src/lib/samples/sample.ts | 62 ++++ src/lib/syntax_styler.test.ts | 42 --- src/routes/+layout.svelte | 3 +- src/routes/+page.svelte | 15 +- src/routes/Code_Tome.svelte | 35 +- src/routes/Footer.svelte | 7 + src/routes/benchmark/+page.svelte | 169 ++++++++++ src/routes/compare/+page.svelte | 26 ++ src/routes/domstyler/+page.svelte | 35 ++ src/routes/moss.css | 41 ++- src/routes/package.ts | 312 ++++++++++++----- src/routes/rangestyler/+page.svelte | 37 ++ src/routes/samples/+page.svelte | 26 -- src/update_tests.task.ts | 23 +- 65 files changed, 4195 insertions(+), 609 deletions(-) create mode 100644 BENCHMARK_BASELINE.md create mode 100644 CLAUDE.md create mode 100644 TODO_HIGHLIGHT.md create mode 100644 TODO_RESTRUCTURE.md create mode 100644 src/fixtures/css_custom_highlight_api.md create mode 100644 src/fixtures/custom_highlight_api.md create mode 100644 src/fixtures/highlight.md create mode 100644 src/fixtures/styled_html_outputs/css.html create mode 100644 src/fixtures/styled_html_outputs/html.html create mode 100644 src/fixtures/styled_html_outputs/json.html create mode 100644 src/fixtures/styled_html_outputs/svelte.html create mode 100644 src/fixtures/styled_html_outputs/ts.html rename src/lib/{Code.svelte => Domstyler_Code.svelte} (78%) create mode 100644 src/lib/Rangestyler_Code.svelte create mode 100644 src/lib/benchmark.ts delete mode 100644 src/lib/code_sample_inputs.ts delete mode 100644 src/lib/code_sample_outputs.ts create mode 100644 src/lib/code_samples.ts create mode 100644 src/lib/domstyler.test.ts rename src/lib/{syntax_styler.ts => domstyler.ts} (95%) create mode 100644 src/lib/domstyler_global.ts rename src/lib/{grammar_clike.ts => domstyler_lang_clike.ts} (80%) rename src/lib/{grammar_css.ts => domstyler_lang_css.ts} (75%) rename src/lib/{grammar_markup.ts => domstyler_lang_html.ts} (75%) rename src/lib/{grammar_js.ts => domstyler_lang_js.ts} (84%) rename src/lib/{grammar_json.ts => domstyler_lang_json.ts} (73%) rename src/lib/{grammar_svelte.ts => domstyler_lang_svelte.ts} (65%) rename src/lib/{grammar_ts.ts => domstyler_lang_ts.ts} (74%) rename src/lib/{theme.css => domstyler_theme.css} (100%) rename src/lib/{theme_standalone.css => domstyler_theme_standalone.css} (100%) delete mode 100644 src/lib/index.ts create mode 100644 src/lib/rangestyler.ts create mode 100644 src/lib/rangestyler_builder.ts create mode 100644 src/lib/rangestyler_global.ts create mode 100644 src/lib/rangestyler_lang_css.ts create mode 100644 src/lib/rangestyler_lang_html.ts create mode 100644 src/lib/rangestyler_lang_json.ts create mode 100644 src/lib/rangestyler_lang_svelte.ts create mode 100644 src/lib/rangestyler_lang_ts.ts create mode 100644 src/lib/rangestyler_theme.css create mode 100644 src/lib/rangestyler_types.ts create mode 100644 src/lib/run_benchmark.ts create mode 100644 src/lib/samples/all.gen.ts create mode 100644 src/lib/samples/all.ts create mode 100644 src/lib/samples/sample.css create mode 100644 src/lib/samples/sample.html create mode 100644 src/lib/samples/sample.json create mode 100644 src/lib/samples/sample.svelte create mode 100644 src/lib/samples/sample.ts delete mode 100644 src/lib/syntax_styler.test.ts create mode 100644 src/routes/Footer.svelte create mode 100644 src/routes/benchmark/+page.svelte create mode 100644 src/routes/compare/+page.svelte create mode 100644 src/routes/domstyler/+page.svelte create mode 100644 src/routes/rangestyler/+page.svelte delete mode 100644 src/routes/samples/+page.svelte diff --git a/BENCHMARK_BASELINE.md b/BENCHMARK_BASELINE.md new file mode 100644 index 00000000..dc518943 --- /dev/null +++ b/BENCHMARK_BASELINE.md @@ -0,0 +1,18 @@ +# Benchmark Baseline Results + +## Initial Performance Metrics + +Date: 2025-09-13 + +### Results by Sample + +| Sample | Ops/sec | Mean Time (ms) | Samples | +| ------ | -------- | -------------- | ------- | +| json | 75829.18 | 0.0134 | 373112 | +| html | 13803.66 | 0.0733 | 68206 | +| css | 42293.19 | 0.0240 | 208678 | +| ts | 8888.69 | 0.1134 | 44079 | +| svelte | 2701.73 | 0.3729 | 13409 | + +**Total samples benchmarked:** 5 +**Average ops/sec:** 28703.29 diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..42b2ae35 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,155 @@ +# fuz_code - Syntax Highlighter + +A performance-focused fork of PrismJS for syntax highlighting, optimized for runtime use. + +## File Structure + +The codebase uses a flat structure with clear `domstyler` and `rangestyler` prefixes: + +### DOM Styler (HTML Generation) + +- `src/lib/domstyler.ts` - Main tokenization engine with pattern matching +- `src/lib/domstyler_lang_js.ts` - JS/ECMAScript patterns +- `src/lib/domstyler_lang_ts.ts` - TypeScript (extends JS) +- `src/lib/domstyler_lang_svelte.ts` - Svelte components +- `src/lib/domstyler_lang_html.ts` - HTML/XML (formerly markup) +- `src/lib/domstyler_lang_css.ts` - CSS stylesheets +- `src/lib/domstyler_lang_json.ts` - JSON data +- `src/lib/domstyler_lang_clike.ts` - Base for C-like languages +- `src/lib/Domstyler_Code.svelte` - Svelte component wrapper +- `src/lib/domstyler_theme.css` - Main theme (requires Moss) +- `src/lib/domstyler_theme_standalone.css` - Dependency-free theme +- `src/lib/domstyler_test.ts` - Unit tests + +### Range Styler (CSS Custom Highlight API) + +- `src/lib/rangestyler.ts` - Main class using native browser Ranges +- `src/lib/rangestyler_builder.ts` - Pattern → Range conversion +- `src/lib/rangestyler_types.ts` - Pattern, Rangestyler_Language types +- `src/lib/rangestyler_lang_ts.ts` - TypeScript patterns +- `src/lib/rangestyler_lang_css.ts` - CSS patterns +- `src/lib/rangestyler_lang_html.ts` - HTML patterns +- `src/lib/rangestyler_lang_json.ts` - JSON patterns +- `src/lib/rangestyler_lang_svelte.ts` - Svelte patterns +- `src/lib/Rangestyler_Code.svelte` - Svelte component +- `src/lib/rangestyler_theme.css` - ::highlight() styles + +### Shared Files + +- `src/lib/code_samples.ts` - Test input samples +- `src/lib/benchmark.ts` - Performance benchmarking +- `src/lib/run_benchmark.ts` - Benchmark runner + +## Usage + +### DOM Styler (Traditional HTML Generation) + +```typescript +import {domstyler} from '$lib/domstyler.js'; +import Domstyler_Code from '$lib/Domstyler_Code.svelte'; + +// Direct API +const html = domstyler.stylize(code, 'ts'); + +// Component + +``` + +### Range Styler (CSS Custom Highlight API) + +```typescript +import {rangestyler_global} from '$lib/rangestyler.js'; +import Rangestyler_Code from '$lib/Rangestyler_Code.svelte'; + +// Direct API +rangestyler_global.highlight(element, code, 'ts'); + +// Component + +``` + +## Architecture + +### DOM Styler + +1. **Tokenization Flow**: + - Text → Grammar patterns (regex) → Token stream (linked list) → HTML output + - Uses recursive pattern matching with greedy/non-greedy support + - Supports nested grammars and language embedding + +2. **Grammar System**: + - Hierarchical regex-based patterns + - Grammar extension/inheritance (e.g., TS extends JS) + - Dynamic grammar insertion for language embedding + +### Range Styler + +1. **Highlighting Flow**: + - Text → Pattern matching → Range objects → CSS Custom Highlights + - Direct pattern to Range conversion without intermediate tokens + - Automatic fallback to HTML for unsupported browsers + +2. **Pattern System**: + - Simpler pattern-based definitions + - No grammar inheritance + - Direct platform API usage (CSS.highlights, globalThis.Highlight) + +## Performance Characteristics + +### DOM Styler + +- Works in all browsers + +### Range Styler + +- Uses native browser Range objects instead of HTML generation +- Smaller memory footprint +- Falls back to HTML generation in older browsers + +## Commands + +```bash +npm run dev # Development server +npm run build # Build library +npm run test # Run tests +npm run preview # Preview built site +npm run benchmark # Run benchmarks +``` + +## Current Performance Bottlenecks + +### DOM Styler + +1. **Regex compilation** - Patterns recompiled on each use +2. **Linked list operations** - O(n) traversal for tokens +3. **Deep cloning** - Grammar extension copies entire trees +4. **String concatenation** - HTML built via string concat + +### Range Styler + +1. **Pattern matching** - Could benefit from caching +2. **Range creation** - Multiple DOM operations +3. **Overlap resolution** - O(n²) in worst case + +## Demo Pages + +- `/samples` - DOM Styler examples +- `/highlight` - Range Styler demo +- `/compare` - Side-by-side comparison +- `/benchmark` - Performance testing + +## Planned Optimizations + +See `TODO.md` and `TODO_HIGHLIGHT.md` for optimization plans: + +- Pattern caching +- Array-based token storage +- Grammar pre-compilation +- Multiple implementation strategies for benchmarking + +# important-instruction-reminders + +Do what has been asked; nothing more, nothing less. +NEVER create files unless they're absolutely necessary for achieving your goal. +ALWAYS prefer editing an existing file to creating a new one. +NEVER proactively create documentation files (\*.md) or README files. Only create documentation files if explicitly requested by the User. diff --git a/README.md b/README.md index 03bfdc9f..907ecc7e 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ Docs are a work in progress: - this readme has basic usage instructions - [code.fuz.dev](https://code.fuz.dev/) has usage examples with the Svelte component - [samples](https://code.fuz.dev/samples) on the website - (also see the [inputs](src/lib/code_sample_inputs.ts) + (also see the [inputs](src/lib/code_samples.ts) and [outputs](src/lib/code_sample_outputs.ts)) - [tests](src/lib/syntax_styler.test.ts) @@ -139,7 +139,7 @@ because it's not designed for runtime usage, and it probably does a significantly better job at the task at hand because it uses TextMate grammars. -Results styling the [Svelte sample](src/lib/code_sample_inputs.ts): +Results styling the [Svelte sample](src/lib/code_samples.ts): | Task name | Throughput average (ops/s) | Throughput median (ops/s) | Samples | | ----------------------- | -------------------------- | ------------------------- | ------- | @@ -172,7 +172,7 @@ import nord from 'shiki/themes/nord.mjs'; import {createOnigurumaEngine} from 'shiki/engine/oniguruma'; import {syntax_styler} from '$lib/index.js'; -import {sample_svelte_code} from '$lib/code_sample_inputs.js'; +import {sample_svelte_code} from '$lib/code_samples.js'; console.log('benchmarking'); const bench = new Bench({name: 'syntax styling', time: 2000}); diff --git a/TODO_HIGHLIGHT.md b/TODO_HIGHLIGHT.md new file mode 100644 index 00000000..9172f8a6 --- /dev/null +++ b/TODO_HIGHLIGHT.md @@ -0,0 +1,115 @@ +# CSS Custom Highlight API Implementation + +## Status: Phase 1 Complete ✅ + +Alternative syntax highlighter using CSS Custom Highlight API for improved performance. + +**Current Performance**: ~2x faster in supported browsers +**Browser Support**: Chrome 105+, Safari 15.4+, Firefox 110+, Edge 105+ +**Fallback**: Automatic HTML generation for unsupported browsers + +## Architecture + +``` +src/lib/highlight/ +├── highlight_styler.ts # Main class with language registry +├── range_builder.ts # Pattern matching → Range conversion +├── types.ts # Core types (Pattern, Highlight_Language) +├── language_ts.ts # TypeScript patterns +├── language_json.ts # JSON patterns +├── language_css.ts # CSS patterns +├── language_html.ts # HTML patterns +├── language_svelte.ts # Svelte patterns +├── Highlight_Code.svelte # Component wrapper +├── theme_highlight.css # ::highlight() pseudo-element styles +└── index.ts # Public API with highlight_styler_global +``` + +## Core Types + +```typescript +interface Pattern { + name: string; // Token type (e.g., 'comment', 'keyword') + match: RegExp; // Regex pattern + priority?: number; // For overlap resolution (higher wins) + greedy?: boolean; // Continue matching +} + +interface Highlight_Language { + id: string; // Language identifier + patterns: Pattern[]; // Ordered pattern list +} +``` + +## Usage + +```typescript +// Direct API +import {highlight_styler_global} from '$lib/highlight'; +highlight_styler_global.highlight(element, code, 'ts'); + +// Component + +``` + +## Phase 1 Implementation ✅ + +**Completed**: +- [x] Core highlight_styler.ts with pattern matching +- [x] range_builder.ts for Range creation +- [x] Direct CSS.highlights API usage (no wrapper) +- [x] All language definitions (ts, json, css, html, svelte) +- [x] Highlight_Code.svelte component +- [x] Browser support detection with fallback +- [x] Snake_case naming convention +- [x] Theme CSS with ::highlight() styles +- [x] Demo page at /highlight +- [x] Benchmark page at /benchmark + +**Performance**: ~6,300 ops/sec (2x current 3,150 ops/sec) in native mode + +## CSS Theme + +```css +::highlight(ts_comment) { color: var(--text_color_5); } +::highlight(ts_keyword) { color: var(--color_f_5); } +::highlight(ts_string) { color: var(--color_b_5); } +/* ... per language, per token type */ +``` + +## Design Decisions + +1. **Snake_case naming** - Consistent with codebase +2. **No aliases** - Only exact language IDs ('ts', not 'typescript') +3. **Direct platform APIs** - No abstraction layers +4. **Pattern-based** - Simple regex patterns, no grammar inheritance +5. **Global instance** - Pre-registered languages in highlight_styler_global + +--- + +## Future Work (Phases 2-4) + +### Phase 2: Auto-Optimization +- Pattern analysis for optimization opportunities +- Keyword Set conversion for faster matching +- Character class lookup tables +- Compiled pattern caching + +### Phase 3: Targeted Optimization +- Specialized scanners for hot paths (strings, comments, numbers) +- Custom scanner functions for complex patterns +- Performance profiling integration + +### Phase 4: Advanced Features +- Incremental updates for editing +- Worker pool for large files +- JIT optimization for frequently used patterns +- Runtime pattern optimization + +**Target**: 15,000+ ops/sec (5x current) + +## Risks & Mitigation + +- **Browser bugs**: Extensive testing, maintain fallback +- **Performance regression**: Continuous benchmarking +- **API complexity**: Keep simple API, hide complexity internally \ No newline at end of file diff --git a/TODO_RESTRUCTURE.md b/TODO_RESTRUCTURE.md new file mode 100644 index 00000000..10098718 --- /dev/null +++ b/TODO_RESTRUCTURE.md @@ -0,0 +1,256 @@ +# Module Restructuring Plan + +## Overview + +Restructure the codebase to use clearer naming with `domstyler` and `rangestyler` prefixes, remove all barrel files, and flatten to a single directory. + +## File Mapping + +### DOM Styler (Current → New) + +``` +src/lib/syntax_styler.ts → src/lib/domstyler.ts +src/lib/syntax_styler.test.ts → src/lib/domstyler_test.ts +src/lib/Code.svelte → src/lib/Domstyler_Code.svelte +src/lib/grammar_js.ts → src/lib/domstyler_lang_js.ts +src/lib/grammar_ts.ts → src/lib/domstyler_lang_ts.ts +src/lib/grammar_css.ts → src/lib/domstyler_lang_css.ts +src/lib/grammar_markup.ts → src/lib/domstyler_lang_html.ts +src/lib/grammar_json.ts → src/lib/domstyler_lang_json.ts +src/lib/grammar_svelte.ts → src/lib/domstyler_lang_svelte.ts +src/lib/grammar_clike.ts → src/lib/domstyler_lang_clike.ts +src/lib/theme.css → src/lib/domstyler_theme.css +src/lib/theme_standalone.css → src/lib/domstyler_theme_standalone.css +src/lib/index.ts → DELETE (no barrel files) +``` + +### Range Styler (Current → New) + +``` +src/lib/highlight/highlight_styler.ts → src/lib/rangestyler.ts +src/lib/highlight/range_builder.ts → src/lib/rangestyler_builder.ts +src/lib/highlight/types.ts → src/lib/rangestyler_types.ts +src/lib/highlight/Highlight_Code.svelte → src/lib/Rangestyler_Code.svelte +src/lib/highlight/language_ts.ts → src/lib/rangestyler_lang_ts.ts +src/lib/highlight/language_css.ts → src/lib/rangestyler_lang_css.ts +src/lib/highlight/language_html.ts → src/lib/rangestyler_lang_html.ts +src/lib/highlight/language_json.ts → src/lib/rangestyler_lang_json.ts +src/lib/highlight/language_svelte.ts → src/lib/rangestyler_lang_svelte.ts +src/lib/highlight/theme_highlight.css → src/lib/rangestyler_theme.css +src/lib/highlight/index.ts → DELETE (no barrel files) +src/lib/highlight/CLAUDE.md → Move content to root CLAUDE.md +``` + +### Shared Files (Keep As-Is) + +``` +src/lib/code_samples.ts → src/lib/code_samples.ts +src/lib/benchmark.ts → src/lib/benchmark.ts +src/lib/run_benchmark.ts → src/lib/run_benchmark.ts +``` + +## Class/Type/Function Renaming + +### DOM Styler + +```typescript +// domstyler.ts +export class Domstyler { ... } // was Syntax_Styler +export const domstyler = new Domstyler(); // was syntax_styler + +// Types +export type Grammar { ... } // unchanged +export type Grammar_Token { ... } // unchanged +export type Add_Domstyler_Grammar { ... } // unchanged + +// domstyler_lang_*.ts +export const add_domstyler_grammar_js: Add_Domstyler_Grammar = ... // unchanged function names +``` + +### Range Styler + +```typescript +// rangestyler.ts +export class Rangestyler { ... } // was Highlight_Styler +export const rangestyler_global = new Rangestyler(); // was highlight_styler_global + +// rangestyler_types.ts +export interface Pattern { ... } // unchanged +export interface Rangestyler_Language { ... } // was Highlight_Language + +// rangestyler_lang_*.ts +export const ts_language: Rangestyler_Language = ... // unchanged exports +``` + +## Import Updates + +### Before + +```typescript +import {syntax_styler} from '$lib/index.js'; +import {Syntax_Styler} from '$lib/syntax_styler.js'; +import Code from '$lib/Code.svelte'; +import {highlight_styler_global} from '$lib/highlight/index.js'; +import Highlight_Code from '$lib/highlight/Highlight_Code.svelte'; +``` + +### After + +```typescript +import {domstyler} from '$lib/domstyler.js'; +import {Domstyler} from '$lib/domstyler.js'; +import Domstyler_Code from '$lib/Domstyler_Code.svelte'; +import {rangestyler_global} from '$lib/rangestyler.js'; +import Rangestyler_Code from '$lib/Rangestyler_Code.svelte'; +``` + +## CSS Class Updates + +### DOM Styler Theme + +```css +/* domstyler_theme.css */ +.token.comment { ... } /* unchanged */ +.token.string { ... } /* unchanged */ +``` + +### Range Styler Theme + +```css +/* rangestyler_theme.css */ +::highlight(ts_comment) { ... } /* unchanged */ +::highlight(json_property) { ... } /* unchanged */ +``` + +## Migration Steps + +### Phase 1: Move and Rename Files + +1. Move Range Styler files from src/lib/highlight/ to src/lib/: + + ```bash + mv src/lib/highlight/highlight_styler.ts src/lib/rangestyler.ts + mv src/lib/highlight/range_builder.ts src/lib/rangestyler_builder.ts + mv src/lib/highlight/types.ts src/lib/rangestyler_types.ts + mv src/lib/highlight/Highlight_Code.svelte src/lib/Rangestyler_Code.svelte + mv src/lib/highlight/language_ts.ts src/lib/rangestyler_lang_ts.ts + mv src/lib/highlight/language_css.ts src/lib/rangestyler_lang_css.ts + mv src/lib/highlight/language_html.ts src/lib/rangestyler_lang_html.ts + mv src/lib/highlight/language_json.ts src/lib/rangestyler_lang_json.ts + mv src/lib/highlight/language_svelte.ts src/lib/rangestyler_lang_svelte.ts + mv src/lib/highlight/theme_highlight.css src/lib/rangestyler_theme.css + ``` + +2. Rename DOM Styler files in place: + + ```bash + mv src/lib/syntax_styler.ts src/lib/domstyler.ts + mv src/lib/syntax_styler.test.ts src/lib/domstyler_test.ts + mv src/lib/Code.svelte src/lib/Domstyler_Code.svelte + mv src/lib/grammar_js.ts src/lib/domstyler_lang_js.ts + mv src/lib/grammar_ts.ts src/lib/domstyler_lang_ts.ts + mv src/lib/grammar_css.ts src/lib/domstyler_lang_css.ts + mv src/lib/grammar_markup.ts src/lib/domstyler_lang_html.ts + mv src/lib/grammar_json.ts src/lib/domstyler_lang_json.ts + mv src/lib/grammar_svelte.ts src/lib/domstyler_lang_svelte.ts + mv src/lib/grammar_clike.ts src/lib/domstyler_lang_clike.ts + mv src/lib/theme.css src/lib/domstyler_theme.css + mv src/lib/theme_standalone.css src/lib/domstyler_theme_standalone.css + ``` + +3. Delete barrel files and empty directory: + ```bash + rm src/lib/index.ts + rm src/lib/highlight/index.ts + rm -rf src/lib/highlight/ + ``` + +### Phase 2: Update File Contents + +4. Update class names and exports in moved files +5. Update imports within library files +6. Update cross-references between domstyler and rangestyler files + +### Phase 3: Update Consumers + +7. Update all component imports in routes/ +8. Update test imports +9. Update benchmark imports +10. Run tests to verify everything works + +### Phase 4: Documentation + +11. Update root CLAUDE.md +12. Merge src/lib/highlight/CLAUDE.md content into root CLAUDE.md +13. Update package.json exports if needed + +## Component Updates + +### Domstyler_Code.svelte + +```svelte + +``` + +### Rangestyler_Code.svelte + +```svelte + +``` + +## Route Updates + +### /samples/+page.svelte + +```svelte +import Domstyler_Code from '$lib/Domstyler_Code.svelte'; +``` + +### /highlight/+page.svelte + +```svelte +import Rangestyler_Code from '$lib/Rangestyler_Code.svelte'; import '$lib/rangestyler_theme.css'; +``` + +### /compare/+page.svelte + +```svelte +import Domstyler_Code from '$lib/Domstyler_Code.svelte'; import Rangestyler_Code from +'$lib/Rangestyler_Code.svelte'; import '$lib/rangestyler_theme.css'; +``` + +### /benchmark/+page.svelte + +```svelte +import {domstyler} from '$lib/domstyler.js'; import {rangestyler_global} from '$lib/rangestyler.js'; +``` + +## Testing Strategy + +1. Run existing tests after each phase +2. Verify all routes still render correctly +3. Run benchmarks to ensure performance unchanged +4. Test both DOM and Range implementations +5. Verify themes apply correctly + +## Benefits + +- **Clearer naming**: `domstyler` vs `rangestyler` immediately shows implementation +- **No barrel files**: Direct imports are more explicit +- **Flat structure**: Easier to navigate, no nested directories +- **Consistent prefixes**: All related files grouped together +- **Better discoverability**: Can see all files at once in src/lib/ + +## Risks & Mitigation + +- **Breaking imports**: Use find/replace carefully, test thoroughly +- **Missing references**: Search entire codebase for old names +- **Theme conflicts**: Ensure CSS classes don't overlap +- **Documentation drift**: Update all docs in same PR diff --git a/package-lock.json b/package-lock.json index b7e69e6f..55eb0f20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "prettier-plugin-svelte": "^3.4.0", "svelte": "^5.38.7", "svelte-check": "^4.3.1", + "tinybench": "^5.0.1", "tslib": "^2.8.1", "typescript": "^5.9.2", "typescript-eslint": "^8.42.0", @@ -3988,11 +3989,14 @@ } }, "node_modules/tinybench": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", - "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-5.0.1.tgz", + "integrity": "sha512-aNVgWQZY4veCZLQJRftDA1X9OoLUIjDWNfC90nledkX7Lx205IpSEFYnsu4slyofoPGpJ+NIQj+BNSt4U5edMg==", "dev": true, - "license": "MIT" + "license": "MIT", + "engines": { + "node": ">=20.0.0" + } }, "node_modules/tinyexec": { "version": "0.3.2", @@ -4370,6 +4374,13 @@ } } }, + "node_modules/vitest/node_modules/tinybench": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", + "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", + "dev": true, + "license": "MIT" + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 37125119..ab95fad2 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "check": "gro check", "test": "gro test", "preview": "vite preview", - "deploy": "gro deploy" + "deploy": "gro deploy", + "benchmark": "vite-node src/lib/run_benchmark.ts" }, "type": "module", "engines": { @@ -59,6 +60,7 @@ "prettier-plugin-svelte": "^3.4.0", "svelte": "^5.38.7", "svelte-check": "^4.3.1", + "tinybench": "^5.0.1", "tslib": "^2.8.1", "typescript": "^5.9.2", "typescript-eslint": "^8.42.0", @@ -91,61 +93,127 @@ "!dist/**/*.test.*" ], "exports": { - ".": { - "types": "./dist/index.d.ts", - "default": "./dist/index.js" - }, "./package.json": "./package.json", - "./code_sample_inputs.js": { - "types": "./dist/code_sample_inputs.d.ts", - "default": "./dist/code_sample_inputs.js" + "./benchmark.js": { + "types": "./dist/benchmark.d.ts", + "default": "./dist/benchmark.js" + }, + "./code_samples.js": { + "types": "./dist/code_samples.d.ts", + "default": "./dist/code_samples.js" + }, + "./Domstyler_Code.svelte": { + "types": "./dist/Domstyler_Code.svelte.d.ts", + "svelte": "./dist/Domstyler_Code.svelte", + "default": "./dist/Domstyler_Code.svelte" + }, + "./domstyler_lang_clike.js": { + "types": "./dist/domstyler_lang_clike.d.ts", + "default": "./dist/domstyler_lang_clike.js" + }, + "./domstyler_lang_css.js": { + "types": "./dist/domstyler_lang_css.d.ts", + "default": "./dist/domstyler_lang_css.js" + }, + "./domstyler_lang_html.js": { + "types": "./dist/domstyler_lang_html.d.ts", + "default": "./dist/domstyler_lang_html.js" + }, + "./domstyler_lang_js.js": { + "types": "./dist/domstyler_lang_js.d.ts", + "default": "./dist/domstyler_lang_js.js" + }, + "./domstyler_lang_json.js": { + "types": "./dist/domstyler_lang_json.d.ts", + "default": "./dist/domstyler_lang_json.js" + }, + "./domstyler_lang_svelte.js": { + "types": "./dist/domstyler_lang_svelte.d.ts", + "default": "./dist/domstyler_lang_svelte.js" + }, + "./domstyler_lang_ts.js": { + "types": "./dist/domstyler_lang_ts.d.ts", + "default": "./dist/domstyler_lang_ts.js" + }, + "./domstyler_theme_standalone.css": { + "default": "./dist/domstyler_theme_standalone.css" + }, + "./domstyler_theme.css": { + "default": "./dist/domstyler_theme.css" + }, + "./domstyler.js": { + "types": "./dist/domstyler.d.ts", + "default": "./dist/domstyler.js" + }, + "./rangestyler_builder.js": { + "types": "./dist/rangestyler_builder.d.ts", + "default": "./dist/rangestyler_builder.js" + }, + "./Rangestyler_Code.svelte": { + "types": "./dist/Rangestyler_Code.svelte.d.ts", + "svelte": "./dist/Rangestyler_Code.svelte", + "default": "./dist/Rangestyler_Code.svelte" + }, + "./rangestyler_lang_css.js": { + "types": "./dist/rangestyler_lang_css.d.ts", + "default": "./dist/rangestyler_lang_css.js" + }, + "./rangestyler_lang_html.js": { + "types": "./dist/rangestyler_lang_html.d.ts", + "default": "./dist/rangestyler_lang_html.js" + }, + "./rangestyler_lang_json.js": { + "types": "./dist/rangestyler_lang_json.d.ts", + "default": "./dist/rangestyler_lang_json.js" + }, + "./rangestyler_lang_svelte.js": { + "types": "./dist/rangestyler_lang_svelte.d.ts", + "default": "./dist/rangestyler_lang_svelte.js" }, - "./code_sample_outputs.js": { - "types": "./dist/code_sample_outputs.d.ts", - "default": "./dist/code_sample_outputs.js" + "./rangestyler_lang_ts.js": { + "types": "./dist/rangestyler_lang_ts.d.ts", + "default": "./dist/rangestyler_lang_ts.js" }, - "./Code.svelte": { - "types": "./dist/Code.svelte.d.ts", - "svelte": "./dist/Code.svelte", - "default": "./dist/Code.svelte" + "./rangestyler_theme.css": { + "default": "./dist/rangestyler_theme.css" }, - "./grammar_clike.js": { - "types": "./dist/grammar_clike.d.ts", - "default": "./dist/grammar_clike.js" + "./rangestyler_types.js": { + "types": "./dist/rangestyler_types.d.ts", + "default": "./dist/rangestyler_types.js" }, - "./grammar_css.js": { - "types": "./dist/grammar_css.d.ts", - "default": "./dist/grammar_css.js" + "./rangestyler.js": { + "types": "./dist/rangestyler.d.ts", + "default": "./dist/rangestyler.js" }, - "./grammar_js.js": { - "types": "./dist/grammar_js.d.ts", - "default": "./dist/grammar_js.js" + "./run_benchmark.js": { + "types": "./dist/run_benchmark.d.ts", + "default": "./dist/run_benchmark.js" }, - "./grammar_json.js": { - "types": "./dist/grammar_json.d.ts", - "default": "./dist/grammar_json.js" + "./samples/all.gen.js": { + "types": "./dist/samples/all.gen.d.ts", + "default": "./dist/samples/all.gen.js" }, - "./grammar_markup.js": { - "types": "./dist/grammar_markup.d.ts", - "default": "./dist/grammar_markup.js" + "./samples/all.js": { + "types": "./dist/samples/all.d.ts", + "default": "./dist/samples/all.js" }, - "./grammar_svelte.js": { - "types": "./dist/grammar_svelte.d.ts", - "default": "./dist/grammar_svelte.js" + "./samples/sample.css": { + "default": "./dist/samples/sample.css" }, - "./grammar_ts.js": { - "types": "./dist/grammar_ts.d.ts", - "default": "./dist/grammar_ts.js" + "./samples/sample.html": { + "default": "./dist/samples/sample.html" }, - "./syntax_styler.js": { - "types": "./dist/syntax_styler.d.ts", - "default": "./dist/syntax_styler.js" + "./samples/sample.json": { + "default": "./dist/samples/sample.json" }, - "./theme_standalone.css": { - "default": "./dist/theme_standalone.css" + "./samples/sample.svelte": { + "types": "./dist/samples/sample.svelte.d.ts", + "svelte": "./dist/samples/sample.svelte", + "default": "./dist/samples/sample.svelte" }, - "./theme.css": { - "default": "./dist/theme.css" + "./samples/sample.js": { + "types": "./dist/samples/sample.d.ts", + "default": "./dist/samples/sample.js" } } } diff --git a/src/fixtures/css_custom_highlight_api.md b/src/fixtures/css_custom_highlight_api.md new file mode 100644 index 00000000..b621c312 --- /dev/null +++ b/src/fixtures/css_custom_highlight_api.md @@ -0,0 +1,104 @@ +--- +title: CSS custom highlight API +slug: Web/CSS/CSS_custom_highlight_API +page-type: css-module +spec-urls: https://drafts.csswg.org/css-highlight-api-1/ +sidebar: cssref +--- + +The **CSS custom highlight API** module provides a programmatic way to target specific ranges of text defined by range objects, without affecting the underlying DOM structure. The range objects can then be selected via `::highlight()` pseudo-elements, and have highlight styles added and removed. The features of this module can create highlight effects similar to how text editors highlight spelling or grammar errors, and code editors highlight syntax errors. + +The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create arbitrary text ranges (defined as {{domxref('Range')}} objects in JavaScript) and style them via CSS, rather than being limited to browser-defined ranges. + +## Custom highlight API in action + +To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a [limited number of properties](/en-US/docs/Web/CSS/::highlight#allowable_properties). + +```html-nolint hidden +

Directions

+

Lincoln Memorial to Martin Luther King, Jr. Memorial

+
  1. Head south on Lincoln Memorial Circle
  2. Turn right toward Independence Ave
  3. Turn left onto Independence Ave
  4. Turn right onto West Basin Dr
  5. Look up when you reach 64 Independence Ave!
    6. +
+
+ +``` + +This example uses the {{cssxref("text-decoration")}} property to strike through the `steps` highlight range defined by our JavaScript: + +```css +::highlight(steps) { + text-decoration: line-through; + color: blue; +} +``` + +We create a `Range` with a start and end node (which is the same node in this case). We then set this range as the `Highlight` using the `set()` method of the CSS `HighlightRegistry` interface. + +```js +const rangeToHighlight = new Range(); +const list = document.querySelector('ol'); +rangeToHighlight.setStart(list, 0); +rangeToHighlight.setEnd(list, 0); + +CSS.highlights.set('steps', new Highlight(rangeToHighlight)); +``` + +An event listener updates the end of the highlighted range when the number of completed steps changes: + +```js +const currentPositionSlider = document.querySelector('input'); +currentPositionSlider.addEventListener('change', (e) => { + rangeToHighlight.setEnd(list, e.target.value); +}); +``` + +{{ EmbedLiveSample('Custom highlight API in action', 700, 300) }} + +## Reference + +### Pseudo-elements + +- {{CSSXref("::highlight()")}} + +### Interfaces + +- {{domxref("Highlight")}} +- {{domxref("HighlightRegistry")}} + +### Interface extensions + +This module adds properties and methods to interfaces defined in other specifications. + +- {{domxref("CSS")}} + - {{domxref("CSS.highlights")}} + +## Guides + +- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API#concepts_and_usage) + - : The concepts and usage of the CSS custom highlight API, including creating `Range` and `Highlight` objects, registering the highlights using the `HighlightRegistry`, and styling the highlights using the `::highlight()` pseudo-element. + +## Related concepts + +- {{CSSXref("::grammar-error")}} +- {{CSSXref("::selection")}} +- {{CSSXref("::spelling-error")}} +- {{CSSXref("::target-text")}} +- {{domxref("Range")}} Interface and {{domxref("Range.range", "Range()")}} constructor +- [Text fragments](/en-US/docs/Web/URI/Reference/Fragment/Text_fragments) +- {{domxref("FragmentDirective")}} Interface + +## Specifications + +{{Specifications}} + +## See also + +- [CSS pseudo-element module](/en-US/docs/Web/CSS/CSS_pseudo-elements) +- [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) APIs diff --git a/src/fixtures/custom_highlight_api.md b/src/fixtures/custom_highlight_api.md new file mode 100644 index 00000000..2c63eceb --- /dev/null +++ b/src/fixtures/custom_highlight_api.md @@ -0,0 +1,237 @@ +--- +title: CSS Custom Highlight API +slug: Web/API/CSS_Custom_Highlight_API +page-type: web-api-overview +browser-compat: + - api.Highlight + - api.HighlightRegistry + - css.selectors.highlight +spec-urls: https://drafts.csswg.org/css-highlight-api-1/ +--- + +{{DefaultAPISidebar("CSS Custom Highlight API")}} + +The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them. + +## Concepts and usage + +Styling text ranges on a webpage can be very useful. For example, text editing web apps highlight spelling or grammar errors, and code editors highlight syntax errors. + +The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create and style arbitrary {{domxref('Range')}} objects, rather than being limited to browser-defined ranges. + +Using the CSS Custom Highlight API, you can programmatically create text ranges and highlight them without affecting the DOM structure in the page. + +There are four steps to style text ranges on a webpage using the CSS Custom Highlight API: + +1. Creating {{domxref("Range")}} objects. +2. Creating {{domxref("Highlight")}} objects for these ranges. +3. Registering the highlights using the {{domxref("HighlightRegistry")}}. +4. Styling the highlights using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. + +### Create ranges + +The first step is to define the text ranges that you want to style by creating {{domxref("Range")}} objects in JavaScript. For example: + +```js +const parentNode = document.getElementById('foo'); + +const range1 = new Range(); +range1.setStart(parentNode, 10); +range1.setEnd(parentNode, 20); + +const range2 = new Range(); +range2.setStart(parentNode, 40); +range2.setEnd(parentNode, 60); +``` + +### Create highlights + +The second step is to instantiate {{domxref("Highlight")}} objects for your text ranges. + +Multiple ranges can be associated to one highlight. If you want to highlight multiple pieces of text the same way, you need to create a single highlight and initialize it with the corresponding ranges. + +```js +const highlight = new Highlight(range1, range2); +``` + +But you can also create as many highlights as you need. For example, if you are building a collaborative text editor where each user gets a different text color, then you can create one highlight per user, as seen in the code snippet below: + +```js +const user1Highlight = new Highlight(user1Range1, user1Range2); +const user2Highlight = new Highlight(user2Range1, user2Range2, user2Range3); +``` + +Each highlight can be styled differently. + +### Register highlights + +Once highlights have been created, register them by using the {{domxref("HighlightRegistry")}} available as {{domxref("CSS/highlights_static", "CSS.highlights")}}. + +The registry is a {{jsxref("Map")}}-like object used to register highlights by names, as seen below: + +```js +CSS.highlights.set('user-1-highlight', user1Highlight); +CSS.highlights.set('user-2-highlight', user2Highlight); +``` + +In the above code snippet, the `user-1-highlight` and `user-2-highlight` strings are custom identifiers that can be used in CSS to apply styles to the registered highlights. + +You can register as many highlights as you need in the registry, as well as remove highlights and clear the entire registry. + +```js +// Remove a single highlight from the registry. +CSS.highlights.delete('user-1-highlight'); + +// Clear the registry. +CSS.highlights.clear(); +``` + +### Style highlights + +The final step is to style the registered highlights. This is done by using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. For example, to style the `user-1-highlight` highlight registered in the previous step: + +```css +::highlight(user-1-highlight) { + background-color: yellow; + color: black; +} +``` + +## Interfaces + +- {{domxref("Highlight")}} + - : This interface is used to represent a collection of ranges to be styled on a document. +- {{domxref("HighlightRegistry")}} + - : Accessible via {{domxref("CSS/highlights_static", "CSS.highlights")}}, this {{jsxref("Map")}}-like object is used to register highlights with custom identifiers. + +## Examples + +### Highlighting search results + +This example shows how to use the CSS Custom Highlight API to highlight search results. + +#### HTML + +The HTML code snippet below defines a search field and an article with a few paragraphs of text: + +```html + +
+

+ Maxime debitis hic, delectus perspiciatis laborum molestiae labore, deleniti, quam consequatur + iure veniam alias voluptas nisi quo. Dolorem eaque alias, quo vel quas repudiandae architecto + deserunt quidem, sapiente laudantium nulla. +

+

+ Maiores odit molestias, necessitatibus doloremque dolor illum reprehenderit provident nostrum + laboriosam iste, tempore perferendis! Ab porro neque esse voluptas libero necessitatibus fugiat, + ex, minus atque deserunt veniam molestiae tempora? Vitae. +

+

+ Dolorum facilis voluptate eaque eius similique ducimus dignissimos assumenda quos architecto. + Doloremque deleniti non exercitationem rerum quam alias harum, nisi obcaecati corporis + temporibus vero sapiente voluptatum est quibusdam id ipsa. +

+
+``` + +#### JavaScript + +JavaScript is used to listen to the `input` event on the search field. When the event is fired, the code locates matches for the input text in the article text. It then creates ranges for the matches, and uses the CSS Custom Highlight API to create and register a `search-results` highlight object: + +```js +const query = document.getElementById('query'); +const article = document.querySelector('article'); + +// Find all text nodes in the article. We'll search within +// these text nodes. +const treeWalker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT); +const allTextNodes = []; +let currentNode = treeWalker.nextNode(); +while (currentNode) { + allTextNodes.push(currentNode); + currentNode = treeWalker.nextNode(); +} + +// Listen to the input event to run the search. +query.addEventListener('input', () => { + // If the CSS Custom Highlight API is not supported, + // display a message and bail-out. + if (!CSS.highlights) { + article.textContent = 'CSS Custom Highlight API not supported.'; + return; + } + + // Clear the HighlightRegistry to remove the + // previous search results. + CSS.highlights.clear(); + + // Clean-up the search query and bail-out if + // if it's empty. + const str = query.value.trim().toLowerCase(); + if (!str) { + return; + } + + // Iterate over all text nodes and find matches. + const ranges = allTextNodes + .map((el) => ({el, text: el.textContent.toLowerCase()})) + .map(({text, el}) => { + const indices = []; + let startPos = 0; + while (startPos < text.length) { + const index = text.indexOf(str, startPos); + if (index === -1) break; + indices.push(index); + startPos = index + str.length; + } + + // Create a range object for each instance of + // str we found in the text node. + return indices.map((index) => { + const range = new Range(); + range.setStart(el, index); + range.setEnd(el, index + str.length); + return range; + }); + }); + + // Create a Highlight object for the ranges. + const searchResultsHighlight = new Highlight(...ranges.flat()); + + // Register the Highlight object in the registry. + CSS.highlights.set('search-results', searchResultsHighlight); +}); +``` + +#### CSS + +Finally, the `::highlight()` pseudo-element is used in CSS to style the highlights: + +```css +::highlight(search-results) { + background-color: #ff0066; + color: white; +} +``` + +#### Result + +The result is shown below. Type text within the search field to highlight matches in the article: + +{{ EmbedLiveSample('Highlighting search results', 700, 300) }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) +- HTML [`contentEditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) attribute +- CSS {{cssxref("pseudo-elements")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module diff --git a/src/fixtures/highlight.md b/src/fixtures/highlight.md new file mode 100644 index 00000000..80b1f9ea --- /dev/null +++ b/src/fixtures/highlight.md @@ -0,0 +1,111 @@ +--- +title: Highlight +slug: Web/API/Highlight +page-type: web-api-interface +browser-compat: api.Highlight +--- + +{{APIRef("CSS Custom Highlight API")}} + +The **`Highlight`** interface of the [CSS Custom Highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) is used to represent a collection of {{domxref("Range")}} instances to be styled using the API. + +To style arbitrary ranges in a page, instantiate a new `Highlight` object, add one or more `Range` objects to it, and register it using the {{domxref("HighlightRegistry")}}. + +A `Highlight` instance is a [`Set`-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) that can hold one or more `Range` objects. + +{{InheritanceDiagram}} + +## Constructor + +- {{domxref("Highlight.Highlight()", "Highlight()")}} + - : Returns a newly created `Highlight` object. + +## Instance properties + +_The `Highlight` interface doesn't inherit any properties._ + +- {{domxref("Highlight.priority")}} + - : A number that indicates the priority of this `Highlight` object. When multiple highlights overlap, the browser uses this priority to decide how to style the overlapping parts. +- {{domxref("Highlight.size")}} {{ReadOnlyInline}} + - : Returns the number of ranges in the `Highlight` object. +- {{domxref("Highlight.type")}} + - : An enumerated {{jsxref("String")}} used to specify the semantic meaning of the highlight. This allows assistive technologies to include this meaning when exposing the highlight to users. + +## Instance methods + +_The `Highlight` interface doesn't inherit any methods_. + +- {{domxref("Highlight.add()")}} + - : Add a new range to this highlight. +- {{domxref("Highlight.clear()")}} + - : Remove all ranges from this highlight. +- {{domxref("Highlight.delete()")}} + - : Remove a range from this highlight. +- {{domxref("Highlight.entries()")}} + - : Returns a new iterator object that contains each range in the highlight object, in insertion order. +- {{domxref("Highlight.forEach()")}} + - : Calls the given callback once for each range in the highlight object, in insertion order. +- {{domxref("Highlight.has()")}} + - : Returns a boolean asserting whether a range is present the highlight object or not. +- {{domxref("Highlight.keys()")}} + - : An alias for {{domxref("Highlight.values()")}}. +- {{domxref("Highlight.values()")}} + - : Returns a new iterator object that yields the ranges in the highlight object in insertion order. + +## Examples + +The following example demonstrates how specific parts of a block of text can be highlighted. + +```html-nolint +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem + sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur + molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.

+``` + +This JavaScript code creates [ranges](/en-US/docs/Web/API/Range), instantiates a new `Highlight` object for them, and [registers it](/en-US/docs/Web/API/HighlightRegistry/set) to be styled on the page: + +```js +const parentNode = document.querySelector('.foo'); +const textNode = parentNode.firstChild; + +// Create a couple of ranges. +const range1 = new Range(); +range1.setStart(textNode, 6); +range1.setEnd(textNode, 21); + +const range2 = new Range(); +range2.setStart(textNode, 57); +range2.setEnd(textNode, 71); + +// Create a custom highlight for these ranges. +const highlight = new Highlight(range1, range2); + +// Register the ranges in the HighlightRegistry. +CSS.highlights.set('my-custom-highlight', highlight); +``` + +The following CSS code snippet demonstrates how to style the registered custom highlight by using the {{cssxref("::highlight")}} pseudo-element: + +```css +::highlight(my-custom-highlight) { + background-color: peachpuff; +} +``` + +### Result + +{{EmbedLiveSample("example", "100%", '100')}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module +- [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/src/fixtures/styled_html_outputs/css.html b/src/fixtures/styled_html_outputs/css.html new file mode 100644 index 00000000..5b78d4f5 --- /dev/null +++ b/src/fixtures/styled_html_outputs/css.html @@ -0,0 +1,35 @@ +.some_class { + color: red; +} + +.hypen-class { + font-size: 16px; +} + +p { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* comment */ + +/* +multi +line + +<comment> + +*/ + +#unique_id { + background-color: blue; +} + +div > p { + margin: 10px; +} + +@media (max-width: 600px) { + body { + background-color: lightblue; + } +} diff --git a/src/fixtures/styled_html_outputs/html.html b/src/fixtures/styled_html_outputs/html.html new file mode 100644 index 00000000..88abbef1 --- /dev/null +++ b/src/fixtures/styled_html_outputs/html.html @@ -0,0 +1,34 @@ +<!doctype html> + +<div class="test"> + <p>hello world!</p> +</div> + +<p class="some_class hypen-class">some <span class="a b c">text</span></p> + +<button type="button" disabled>click me</button> + +<!-- comment <div>a<br /> b</div> --> + +<br /> + +<hr /> + +<img src="image.jpg" alt="access" /> + +<ul> + <li>list item 1</li> + <li>list item 2</li> +</ul> + +<script type="text/javascript"> + const ok = 'yes'; +</script> + +<style type="text/css"> + .special::before { + content: '< & >'; + } +</style> + +<![CDATA[ if (a < 0) alert("b"); <not-a-tag> ]]> diff --git a/src/fixtures/styled_html_outputs/json.html b/src/fixtures/styled_html_outputs/json.html new file mode 100644 index 00000000..1d12ae4e --- /dev/null +++ b/src/fixtures/styled_html_outputs/json.html @@ -0,0 +1,9 @@ +{ + "string": "a string", + "number": 12345, + "boolean": true, + "null": null, + "object": { + "array": [1, "b", false] + } +} diff --git a/src/fixtures/styled_html_outputs/svelte.html b/src/fixtures/styled_html_outputs/svelte.html new file mode 100644 index 00000000..578070c8 --- /dev/null +++ b/src/fixtures/styled_html_outputs/svelte.html @@ -0,0 +1,168 @@ +<script lang="ts" module> + export const HELLO = 'world'; +</script> + +<script lang="ts"> + // @ts-expect-error + import Thing from '$lib/Thing.svelte'; + import type {Snippet} from 'svelte'; + + const { + thing, + bound = $bindable(true), + children, + }: { + thing: Record<string, any>; + bound?: boolean; + children: Snippet; + } = $props(); + + const thing_keys = $derived(Object.keys(thing)); + + const a = 1; + + const b = 'b'; + + let c: boolean = $state(true); + + export type Some_Type = 1 | 'b' | true; + + class D { + d1: string = 'd'; + d2: number; + d3 = $state(false); + + constructor(d2: number) { + this.d2 = d2; + } + + class_method(): string { + return `Hello, ${this.d1}`; + } + + instance_method = () => { + /* ... */ + this.#private_method(); + // foo + }; + + #private_method() { + throw new Error(`${this.d1} etc`); + } + + protected protected_method() { + console.log(new Date(123)); // eslint-disable-line no-console + } + } + + // comment + + /* + other comment + + const comment = false; + */ + + /** + * JSDoc comment + */ + + export interface Some_E { + name: string; + age: number; + } + + export const some_e: Some_E = {name: 'A. H.', age: 100}; + + export function add(x: number, y: number): number { + return x + y; + } + + export const plus = (a: any, b: any): any => a + b; +</script> + +<h1>hello {HELLO}!</h1> + +{#each thing_keys as key (key)} + {@const value = thing[key]} + {value} +{/each} + +{#if c} + <Thing string_prop="a" number_prop={1} /> +{:else} + <Thing string_prop="b" number_prop={2} onthing={() => (c = !c)}> + {@render children()} + </Thing> +{/if} + +<!DOCTYPE html> + +<div class="test special" id="unique_id"> + <p>hello world!</p> +</div> + +<p class="some_class hypen-class"> + some <span class="a b c">text</span> +</p> + +<button type="button" disabled> click me </button> + +<!-- comment <div>a<br /> b</div> --> +{a} +{b} +{bound} +{D} + +<br /> + +<hr /> + +<img src="image.jpg" alt="access" /> + +<ul> + <li>list item 1</li> + <li>list item 2</li> +</ul> + +<style> + .some_class { + color: red; + } + + .hypen-class { + font-size: 16px; + } + + p { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + /* comment */ + + /* + multi + line + + <comment> + + */ + + #unique_id { + background-color: blue; + } + + div > p { + margin: 10px; + } + + @media (max-width: 600px) { + :global(body) { + background-color: lightblue; + } + } + + .special::before { + content: '< & >'; + } +</style> diff --git a/src/fixtures/styled_html_outputs/ts.html b/src/fixtures/styled_html_outputs/ts.html new file mode 100644 index 00000000..ae121653 --- /dev/null +++ b/src/fixtures/styled_html_outputs/ts.html @@ -0,0 +1,62 @@ +const a = 1; + +const b = 'b'; + +const c = true; + +export type Some_Type = 1 | 'b' | true; + +class D { + d1: string = 'd'; + d2: number; + d3 = $state(false); + + constructor(d2: number) { + this.d2 = d2; + } + + class_method(): string { + return `Hello, ${this.d1}`; + } + + instance_method = () => { + /* ... */ + this.#private_method(); + // foo + }; + + #private_method() { + throw new Error(`${this.d1} etc`); + } + + protected protected_method() { + console.log(new RegExp('protected')); + } +} + +export {a, b, c, D}; + +// comment + +/* +other comment + +const comment = false; +*/ + +/** + * JSDoc comment + */ + +export interface Some_E { + name: string; + age: number; +} + +export const some_e: Some_E = {name: 'A. H.', age: 100}; + +export function add(x: number, y: number): number { + return x + y; +} + +export const plus = (a: any, b: any): any => a + b; diff --git a/src/lib/Code.svelte b/src/lib/Domstyler_Code.svelte similarity index 78% rename from src/lib/Code.svelte rename to src/lib/Domstyler_Code.svelte index 1bb58976..ef813d84 100644 --- a/src/lib/Code.svelte +++ b/src/lib/Domstyler_Code.svelte @@ -1,8 +1,8 @@ + +
+ + diff --git a/src/lib/benchmark.ts b/src/lib/benchmark.ts new file mode 100644 index 00000000..5ef52485 --- /dev/null +++ b/src/lib/benchmark.ts @@ -0,0 +1,79 @@ +import {Bench} from 'tinybench'; +import {samples} from './code_samples.js'; +import {domstyler_global} from './domstyler_global.js'; + +export interface Benchmark_Result { + name: string; + ops_per_sec: number; + mean_time: number; + samples: number; +} + +export const run_benchmark = async (filter?: string): Promise => { + const bench = new Bench({ + time: 5000, + warmupTime: 1000, + warmupIterations: 50, + }); + + const samples_to_run = filter + ? samples.filter((s) => s.name.includes(filter) || s.lang === filter) + : samples; + + for (const sample of samples_to_run) { + bench.add(`baseline:${sample.name}`, () => { + domstyler_global.stylize(sample.content, sample.lang); + }); + } + + await bench.run(); + + const results: Benchmark_Result[] = []; + + for (const task of bench.tasks) { + if (task && task.result) { + results.push({ + name: task.name, + ops_per_sec: task.result.throughput.mean, + mean_time: task.result.latency.mean, + samples: task.result.latency.samples.length, + }); + } + } + + return results; +}; + +export const format_benchmark_results = (results: Benchmark_Result[]): string => { + const lines: string[] = [ + '## Benchmark Results', + '', + '| Sample | Ops/sec | Mean Time (ms) | Samples |', + '|--------|---------|----------------|---------|', + ]; + + for (const result of results) { + const name = result.name.replace('baseline:', ''); + const ops_per_sec = result.ops_per_sec.toFixed(2); + const mean_time = result.mean_time.toFixed(4); + lines.push(`| ${name} | ${ops_per_sec} | ${mean_time} | ${result.samples} |`); + } + + lines.push(''); + lines.push(`**Total samples benchmarked:** ${results.length}`); + + const avg_ops = results.reduce((sum, r) => sum + r.ops_per_sec, 0) / results.length; + lines.push(`**Average ops/sec:** ${avg_ops.toFixed(2)}`); + + return lines.join('\n'); +}; + +export const run_and_print_benchmark = async (filter?: string): Promise => { + console.log('Starting benchmark...\n'); + + const results = await run_benchmark(filter); + + console.log(format_benchmark_results(results)); + + console.log('\n✅ All samples validated successfully'); +}; diff --git a/src/lib/code_sample_inputs.ts b/src/lib/code_sample_inputs.ts deleted file mode 100644 index dda665e1..00000000 --- a/src/lib/code_sample_inputs.ts +++ /dev/null @@ -1,239 +0,0 @@ -// see `styled_json_code` in `./code_sample_outputs.js` -// for the result of `stylize(sample_json_code, Syntax_Styler.langs.json, 'json')` -export const sample_json_code = ` - -{ - "string": "a string", - "number": 12345, - "boolean": true, - "null": null, - "object": { - "array": [1, "b", false] - } // comments :D -} - -`.trim(); - -// see `styled_html_code` in `./code_sample_outputs.js` -// for the result of `stylize(sample_html_code, Syntax_Styler.langs.markup, 'html')` -export const sample_html_code = ` - - - -
-

hello world!

-
- -

- some text -

- - - - - -
- -
- -access - -
    -
  • list item 1
    • -
  • list item 2
    • -
- - - - - - -]]> -`.trim(); - -// see `styled_css_code` in `./code_sample_outputs.js` -// for the result of `stylize(sample_css_code, Syntax_Styler.langs.css, 'css')` -export const sample_css_code = ` - -.some_class { - color: red; -} - -.dash-class { - font-size: 16px; -} - -p { - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -/* comment */ - -/* -multi -line - - - -*/ - -#unique_id { - background-color: blue; -} - -div > p { - margin: 10px; -} - -@media (max-width: 600px) { - body { - background-color: lightblue; - } -} -`.trim(); - -// see `styled_ts_code` in `./code_sample_outputs.js` -// for the result of `stylize(sample_ts_code, Syntax_Styler.langs.ts, 'ts')` -export const sample_ts_code = ` - -const a = 1; - -const b = 'b'; - -const c = true; - -export type Some_Type = 1 | 'b' | true; - -class D { - d1: string = 'd'; - d2: number; - d3 = $state(false); - - constructor(d2: number) { - this.d2 = d2; - } - - class_method(): string { - return \`Hello, \${this.d1}\`; - } - - instance_method = () => { /* ... */ }; - - #private_method() { - throw new Error(\`\${this.d1} etc\`); - } - - protected protected_method() { - console.log(new RegExp('protected')); - } -} - -// comment - -/* -other comment - -const comment = false; -*/ - -/** - * JSDoc comment - */ - -export interface Some_E { - name: string; - age: number; -} - -export const some_e: Some_E = {name: 'A. H.', age: 100}; - -export function add(x: number, y: number): number { - return x + y; -} - -export const plus = (a: any, b: any): any => a + b; -`.trim(); - -// see `styled_css_code` in `./code_sample_outputs.js` -// for the result of `stylize(sample_svelte_code, Syntax_Styler.langs.svelte, 'svelte')` -export const sample_svelte_code = ` - - - - - -

hello {HELLO}!

- -{#each thing_keys as key (key)} - {@const value = thing[key]} - {value} -{/each} - -{#if true} - -{:else} - - {@render children()} - -{/if} - -${sample_html_code} - - - -`.trim(); - -export const samples = [ - { - content: sample_json_code, - lang: 'json', - }, - { - content: sample_html_code, - lang: 'html', - }, - { - content: sample_css_code, - lang: 'css', - }, - { - content: sample_ts_code, - lang: 'ts', - }, - { - content: sample_svelte_code, - lang: 'svelte', - }, -]; diff --git a/src/lib/code_sample_outputs.ts b/src/lib/code_sample_outputs.ts deleted file mode 100644 index 328a2be6..00000000 --- a/src/lib/code_sample_outputs.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const styled_json_code = - '{\n\t"string": "a string",\n\t"number": 12345,\n\t"boolean": true,\n\t"null": null,\n\t"object": {\n\t\t"array": [1, "b", false]\n\t} // comments :D\n}'; - -export const styled_html_code = - '<!DOCTYPE html>\n\n<div class="test">\n\t<p>hello world!</p>\n</div>\n\n<p class="some_class dash-class">\n\tsome <span class="a b c">text</span>\n</p>\n\n<button type="button" disabled>\n\tclick me\n</button>\n\n<!-- comment <div>a<br /> b</div> -->\n\n<br>\n\n<hr />\n\n<img src="image.jpg" alt="access">\n\n<ul>\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n</ul>\n\n<script type="text/javascript">\n\tconst ok = \'yes\';\n</script>\n\n<style type="text/css">\n\t.special::before {\n\t\tcontent: "< & >";\n\t}\n</style>\n\n<![CDATA[\n\tif (a < 0) alert("b");\n\t<not-a-tag>\n]]>'; - -export const styled_css_code = - '.some_class {\n\tcolor: red;\n}\n\n.dash-class {\n\tfont-size: 16px;\n}\n\np {\n\tbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n/* comment */\n\n/*\nmulti\nline\n\n<comment>\n\n*/\n\n#unique_id {\n\tbackground-color: blue;\n}\n\ndiv > p {\n\tmargin: 10px;\n}\n\n@media (max-width: 600px) {\n\tbody {\n\t\tbackground-color: lightblue;\n\t}\n}'; - -export const styled_ts_code = - 'const a = 1;\n\nconst b = \'b\';\n\nconst c = true;\n\nexport type Some_Type = 1 | \'b\' | true;\n\nclass D {\n\td1: string = \'d\';\n\td2: number;\n\td3 = $state(false);\n\n\tconstructor(d2: number) {\n\t\tthis.d2 = d2;\n\t}\n\n\tclass_method(): string {\n\t\treturn `Hello, ${this.d1}`;\n\t}\n\n\tinstance_method = () => { /* ... */ };\n\n\t#private_method() {\n\t\tthrow new Error(`${this.d1} etc`);\n\t}\n\n\tprotected protected_method() {\n\t\tconsole.log(new RegExp(\'protected\'));\n\t}\n}\n\n// comment\n\n/*\nother comment\n\nconst comment = false;\n*/\n\n/**\n * JSDoc comment\n */\n\nexport interface Some_E {\n\tname: string;\n\tage: number;\n}\n\nexport const some_e: Some_E = {name: \'A. H.\', age: 100};\n\nexport function add(x: number, y: number): number {\n\treturn x + y;\n}\n\nexport const plus = (a: any, b: any): any => a + b;'; - -export const styled_svelte_code = - '<script lang="ts" module>\n\texport const HELLO = \'world\';\n</script>\n\n<script lang="ts">\n\timport Thing from \'$lib/Thing.svelte\';\n\n\tinterface Props {\n\t\tthing: Record<string, any>;\n\t}\n\t\n\tconst {thing}: Props = $props();\n\n\tconst thing_keys = $derived(Object.keys(thing));\n\n\tconst a = 1;\n\t\n\tconst b = \'b\';\n\t\n\tconst c = true;\n\t\n\texport type Some_Type = 1 | \'b\' | true;\n\t\n\tclass D {\n\t\td1: string = \'d\';\n\t\td2: number;\n\t\td3 = $state(false);\n\t\n\t\tconstructor(d2: number) {\n\t\t\tthis.d2 = d2;\n\t\t}\n\t\n\t\tclass_method(): string {\n\t\t\treturn `Hello, ${this.d1}`;\n\t\t}\n\t\n\t\tinstance_method = () => { /* ... */ };\n\t\n\t\t#private_method() {\n\t\t\tthrow new Error(`${this.d1} etc`);\n\t\t}\n\t\n\t\tprotected protected_method() {\n\t\t\tconsole.log(new RegExp(\'protected\'));\n\t\t}\n\t}\n\t\n\t// comment\n\t\n\t/*\n\tother comment\n\t\n\tconst comment = false;\n\t*/\n\t\n\t/**\n\t * JSDoc comment\n\t */\n\t\n\texport interface Some_E {\n\t\tname: string;\n\t\tage: number;\n\t}\n\t\n\texport const some_e: Some_E = {name: \'A. H.\', age: 100};\n\t\n\texport function add(x: number, y: number): number {\n\t\treturn x + y;\n\t}\n\t\n\texport const plus = (a: any, b: any): any => a + b;\n</script>\n\n<h1>hello {HELLO}!</h1>\n\n{#each thing_keys as key (key)}\n\t{@const value = thing[key]}\n\t{value}\n{/each}\n\n{#if true}\n\t<Thing string_prop="a" number_prop={1} />\n{:else}\n\t<Thing string_prop="b" number_prop={2}>\n\t\t{@render children()}\n\t</Thing>\n{/if}\n\n<!DOCTYPE html>\n\n<div class="test">\n\t<p>hello world!</p>\n</div>\n\n<p class="some_class dash-class">\n\tsome <span class="a b c">text</span>\n</p>\n\n<button type="button" disabled>\n\tclick me\n</button>\n\n<!-- comment <div>a<br /> b</div> -->\n\n<br>\n\n<hr />\n\n<img src="image.jpg" alt="access">\n\n<ul>\n\t<li>list item 1</li>\n\t<li>list item 2</li>\n</ul>\n\n<script type="text/javascript">\n\tconst ok = \'yes\';\n</script>\n\n<style type="text/css">\n\t.special::before {\n\t\tcontent: "< & >";\n\t}\n</style>\n\n<![CDATA[\n\tif (a < 0) alert("b");\n\t<not-a-tag>\n]]>\n\n<style>\n\t.some_class {\n\t\tcolor: red;\n\t}\n\t\n\t.dash-class {\n\t\tfont-size: 16px;\n\t}\n\t\n\tp {\n\t\tbox-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n\t}\n\t\n\t/* comment */\n\t\n\t/*\n\tmulti\n\tline\n\t\n\t<comment>\n\t\n\t*/\n\t\n\t#unique_id {\n\t\tbackground-color: blue;\n\t}\n\t\n\tdiv > p {\n\t\tmargin: 10px;\n\t}\n\t\n\t@media (max-width: 600px) {\n\t\tbody {\n\t\t\tbackground-color: lightblue;\n\t\t}\n\t}\n</style>'; diff --git a/src/lib/code_samples.ts b/src/lib/code_samples.ts new file mode 100644 index 00000000..03e47709 --- /dev/null +++ b/src/lib/code_samples.ts @@ -0,0 +1,45 @@ +import {samples as sample_content} from './samples/all.js'; + +export interface Code_Sample { + name: string; + lang: string; + content: string; +} + +export const sample_json: Code_Sample = { + name: 'json', + lang: 'json', + content: sample_content.json, +}; + +export const sample_html: Code_Sample = { + name: 'html', + lang: 'html', + content: sample_content.html, +}; + +export const sample_css: Code_Sample = { + name: 'css', + lang: 'css', + content: sample_content.css, +}; + +export const sample_ts: Code_Sample = { + name: 'ts', + lang: 'ts', + content: sample_content.ts, +}; + +export const sample_svelte: Code_Sample = { + name: 'svelte', + lang: 'svelte', + content: sample_content.svelte, +}; + +export const samples: Code_Sample[] = [ + sample_json, + sample_html, + sample_css, + sample_ts, + sample_svelte, +]; diff --git a/src/lib/domstyler.test.ts b/src/lib/domstyler.test.ts new file mode 100644 index 00000000..a8dc5134 --- /dev/null +++ b/src/lib/domstyler.test.ts @@ -0,0 +1,36 @@ +import {test, assert} from 'vitest'; + +import {domstyler_global} from '$lib/domstyler_global.js'; +import {samples} from '$lib/samples/all.js'; + +import expected_html from '../fixtures/styled_html_outputs/html.html?raw'; +import expected_css from '../fixtures/styled_html_outputs/css.html?raw'; +import expected_ts from '../fixtures/styled_html_outputs/ts.html?raw'; +import expected_svelte from '../fixtures/styled_html_outputs/svelte.html?raw'; +import expected_json from '../fixtures/styled_html_outputs/json.html?raw'; + +function test_highlighting(lang: string, input: string, expected: string) { + const actual = domstyler_global.stylize(input, lang); + + assert.strictEqual(actual, expected); +} + +test('styles HTML', () => { + test_highlighting('html', samples.html, expected_html); +}); + +test('styles CSS', () => { + test_highlighting('css', samples.css, expected_css); +}); + +test('styles TypeScript', () => { + test_highlighting('ts', samples.ts, expected_ts); +}); + +test('styles Svelte', () => { + test_highlighting('svelte', samples.svelte, expected_svelte); +}); + +test('styles JSON', () => { + test_highlighting('json', samples.json, expected_json); +}); diff --git a/src/lib/syntax_styler.ts b/src/lib/domstyler.ts similarity index 95% rename from src/lib/syntax_styler.ts rename to src/lib/domstyler.ts index 24f89ae5..ff9be047 100644 --- a/src/lib/syntax_styler.ts +++ b/src/lib/domstyler.ts @@ -1,4 +1,4 @@ -export type Add_Grammar = (syntax_styler: Syntax_Styler) => void; +export type Add_Domstyler_Grammar = (domstyler: Domstyler) => void; /** * Based on Prism (https://github.com/PrismJS/prism) @@ -8,7 +8,7 @@ export type Add_Grammar = (syntax_styler: Syntax_Styler) => void; * * @see LICENSE */ -export class Syntax_Styler { +export class Domstyler { langs: Record = { plaintext: {}, }; @@ -17,7 +17,7 @@ export class Syntax_Styler { // TODO this API? problem is the grammars rely on mutating existing grammars in the `syntax_styler`, // so for now adding grammars will remain inherently stateful // export interface Syntax_Styler_Options { - // grammars?: Add_Grammar[]; + // grammars?: Add_Domstyler_Grammar[]; // } // options: Syntax_Styler_Options = {} // const {grammars} = options; @@ -71,7 +71,7 @@ export class Syntax_Styler { * @param lang - The name of the language definition passed to `grammar`. * @param grammar - An object containing the tokens to use. * - * Usually a language definition like `syntax_styler.get_lang('markup')`. + * Usually a language definition like `domstyler.get_lang('markup')`. * * @returns the styled HTML * @@ -104,12 +104,12 @@ export class Syntax_Styler { * * This helper method makes it easy to modify existing languages. For example, the CSS language definition * not only defines CSS styling for CSS documents, but also needs to define styling for CSS embedded - * in HTML through ` + + ]]> +`, + json: `{ + "string": "a string", + "number": 12345, + "boolean": true, + "null": null, + "object": { + "array": [1, "b", false] + } +} +`, + svelte: ` + + + +

hello {HELLO}!

+ +{#each thing_keys as key (key)} + {@const value = thing[key]} + {value} +{/each} + +{#if c} + +{:else} + (c = !c)}> + {@render children()} + +{/if} + + + +
+

hello world!

+
+ +

+ some text +

+ + + + +{a} +{b} +{bound} +{D} + +
+ +
+ +access + +
    +
  • list item 1
    • +
  • list item 2
    • +
+ + +`, + ts: `const a = 1; + +const b = 'b'; + +const c = true; + +export type Some_Type = 1 | 'b' | true; + +class D { + d1: string = 'd'; + d2: number; + d3 = $state(false); + + constructor(d2: number) { + this.d2 = d2; + } + + class_method(): string { + return \`Hello, \${this.d1}\`; + } + + instance_method = () => { + /* ... */ + this.#private_method(); + // foo + }; + + #private_method() { + throw new Error(\`\${this.d1} etc\`); + } + + protected protected_method() { + console.log(new RegExp('protected')); + } +} + +export {a, b, c, D}; + +// comment + +/* +other comment + +const comment = false; +*/ + +/** + * JSDoc comment + */ + +export interface Some_E { + name: string; + age: number; +} + +export const some_e: Some_E = {name: 'A. H.', age: 100}; + +export function add(x: number, y: number): number { + return x + y; +} + +export const plus = (a: any, b: any): any => a + b; +`, +}; + +// generated by src/lib/samples/all.gen.ts - DO NOT EDIT OR RISK LOST DATA diff --git a/src/lib/samples/sample.css b/src/lib/samples/sample.css new file mode 100644 index 00000000..e2ba53ad --- /dev/null +++ b/src/lib/samples/sample.css @@ -0,0 +1,35 @@ +.some_class { + color: red; +} + +.hypen-class { + font-size: 16px; +} + +p { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* comment */ + +/* +multi +line + + + +*/ + +#unique_id { + background-color: blue; +} + +div > p { + margin: 10px; +} + +@media (max-width: 600px) { + body { + background-color: lightblue; + } +} diff --git a/src/lib/samples/sample.html b/src/lib/samples/sample.html new file mode 100644 index 00000000..07a8b99a --- /dev/null +++ b/src/lib/samples/sample.html @@ -0,0 +1,34 @@ + + +
+

hello world!

+
+ +

some text

+ + + + + +
+ +
+ +access + +
    +
  • list item 1
    • +
  • list item 2
    • +
+ + + + + + ]]> diff --git a/src/lib/samples/sample.json b/src/lib/samples/sample.json new file mode 100644 index 00000000..032051cc --- /dev/null +++ b/src/lib/samples/sample.json @@ -0,0 +1,9 @@ +{ + "string": "a string", + "number": 12345, + "boolean": true, + "null": null, + "object": { + "array": [1, "b", false] + } +} diff --git a/src/lib/samples/sample.svelte b/src/lib/samples/sample.svelte new file mode 100644 index 00000000..b2b5692c --- /dev/null +++ b/src/lib/samples/sample.svelte @@ -0,0 +1,168 @@ + + + + +

hello {HELLO}!

+ +{#each thing_keys as key (key)} + {@const value = thing[key]} + {value} +{/each} + +{#if c} + +{:else} + (c = !c)}> + {@render children()} + +{/if} + + + +
+

hello world!

+
+ +

+ some text +

+ + + + +{a} +{b} +{bound} +{D} + +
+ +
+ +access + +
    +
  • list item 1
    • +
  • list item 2
    • +
+ + diff --git a/src/lib/samples/sample.ts b/src/lib/samples/sample.ts new file mode 100644 index 00000000..9b02dae5 --- /dev/null +++ b/src/lib/samples/sample.ts @@ -0,0 +1,62 @@ +const a = 1; + +const b = 'b'; + +const c = true; + +export type Some_Type = 1 | 'b' | true; + +class D { + d1: string = 'd'; + d2: number; + d3 = $state(false); + + constructor(d2: number) { + this.d2 = d2; + } + + class_method(): string { + return `Hello, ${this.d1}`; + } + + instance_method = () => { + /* ... */ + this.#private_method(); + // foo + }; + + #private_method() { + throw new Error(`${this.d1} etc`); + } + + protected protected_method() { + console.log(new RegExp('protected')); + } +} + +export {a, b, c, D}; + +// comment + +/* +other comment + +const comment = false; +*/ + +/** + * JSDoc comment + */ + +export interface Some_E { + name: string; + age: number; +} + +export const some_e: Some_E = {name: 'A. H.', age: 100}; + +export function add(x: number, y: number): number { + return x + y; +} + +export const plus = (a: any, b: any): any => a + b; diff --git a/src/lib/syntax_styler.test.ts b/src/lib/syntax_styler.test.ts deleted file mode 100644 index e2137649..00000000 --- a/src/lib/syntax_styler.test.ts +++ /dev/null @@ -1,42 +0,0 @@ -import {test, assert} from 'vitest'; - -import {syntax_styler} from '$lib/index.js'; -import { - sample_html_code, - sample_css_code, - sample_ts_code, - sample_svelte_code, - sample_json_code, -} from '$lib/code_sample_inputs.js'; -import { - styled_html_code, - styled_css_code, - styled_ts_code, - styled_svelte_code, - styled_json_code, -} from '$lib/code_sample_outputs.js'; - -test('styles HTML', () => { - const styled = syntax_styler.stylize(sample_html_code, 'html'); - assert.strictEqual(styled, styled_html_code); -}); - -test('styles CSS', () => { - const styled = syntax_styler.stylize(sample_css_code, 'css'); - assert.strictEqual(styled, styled_css_code); -}); - -test('styles TypeScript', () => { - const styled = syntax_styler.stylize(sample_ts_code, 'ts'); - assert.strictEqual(styled, styled_ts_code); -}); - -test('styles Svelte', () => { - const styled = syntax_styler.stylize(sample_svelte_code, 'svelte'); - assert.strictEqual(styled, styled_svelte_code); -}); - -test('styles JSON', () => { - const styled = syntax_styler.stylize(sample_json_code, 'json'); - assert.strictEqual(styled, styled_json_code); -}); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5a20b7ad..016af1d5 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,8 @@ \n\n`} + `script>\n\t// Something.svelte\n\timport Domstyler_Code from '@ryanatkn/fuz_code/Domstyler_Code.svelte';\n\n\n`} />

outputs:

- +
@@ -84,22 +87,24 @@ import '@ryanatkn/fuz_code/theme.css'; // add this" Passing lang={'{'}null} disables syntax styling:

- '} /> + '} + />
- all is gray`} /> + all is gray`} />

is a block by default:

-
ab
- ab'} /> +
ab
+ ab'} />

- can be inlined with can be inlined with `} + content={``} />

diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte new file mode 100644 index 00000000..15d195f2 --- /dev/null +++ b/src/routes/Footer.svelte @@ -0,0 +1,7 @@ + + +
+ 🎨 +
diff --git a/src/routes/benchmark/+page.svelte b/src/routes/benchmark/+page.svelte new file mode 100644 index 00000000..4299a64c --- /dev/null +++ b/src/routes/benchmark/+page.svelte @@ -0,0 +1,169 @@ + + +
+

CSS Custom Highlight API - Performance Benchmark

+ +
+

+ API Support: + + {rangestyler_global.supports_native ? 'CSS Highlights' : 'HTML Fallback'} + +

+ + {#if status} +

{status}

+ {/if} +
+ + {#if results.length > 0} +
+

Results

+ + + + + + + + + + + {#each results as result (result)} + + + + + + + {/each} + +
SampleCurrent (ops/sec)Highlight (ops/sec)Change
{result.name}{result.current_ops.toLocaleString()}{result.highlight_ops.toLocaleString()} 0} class:color_a_5={result.improvement < 0}> + {result.improvement > 0 ? '+' : ''}{result.improvement.toFixed(1)}% +
+ +
+

Summary

+

+ Average Current: + {Math.round( + results.reduce((sum, r) => sum + r.current_ops, 0) / results.length, + ).toLocaleString()} + ops/sec + +

+

+ Average Highlight: + {Math.round( + results.reduce((sum, r) => sum + r.highlight_ops, 0) / results.length, + ).toLocaleString()} + ops/sec + +

+
+
+ {/if} +
+ + diff --git a/src/routes/compare/+page.svelte b/src/routes/compare/+page.svelte new file mode 100644 index 00000000..6cdd5b08 --- /dev/null +++ b/src/routes/compare/+page.svelte @@ -0,0 +1,26 @@ + + +
+ 🎨 + {#each samples as sample (sample.name)} +
+
+

domstyler

+ +
+
+

rangestyler

+ +
+
+
+ {/each} +
+
diff --git a/src/routes/domstyler/+page.svelte b/src/routes/domstyler/+page.svelte new file mode 100644 index 00000000..c0dbeb11 --- /dev/null +++ b/src/routes/domstyler/+page.svelte @@ -0,0 +1,35 @@ + + +
+ 🎨 +
+

Domstyler

+

+ The Domstyler is a fork of Prism + by Lea Verou. +

+
+
+ {#each samples as { content, lang } (lang)} +
+

{lang}

+
+
+ {/each} +
+
+
+ + diff --git a/src/routes/moss.css b/src/routes/moss.css index 722146ee..f9daab07 100644 --- a/src/routes/moss.css +++ b/src/routes/moss.css @@ -2,11 +2,11 @@ /* * * File statistics: - * - Total files in filer: 262 - * - External dependencies: 234 - * - Internal project files: 28 - * - Files processed (passed filter): 232 - * - Files with CSS classes: 19 + * - Total files in filer: 255 + * - External dependencies: 197 + * - Internal project files: 58 + * - Files processed (passed filter): 227 + * - Files with CSS classes: 24 * - Unique classes found: 41 */ @@ -84,6 +84,9 @@ a.chip { .flex_wrap { flex-wrap: wrap; } +.align_items_center { + align-items: center; +} .justify_content_space_around { justify-content: space-around; } @@ -97,6 +100,12 @@ a.chip { .bg { background-color: var(--bg); } +.color_a_5 { + color: var(--color_a_5); +} +.color_b_5 { + color: var(--color_b_5); +} .border_radius_xs { border-radius: var(--border_radius_xs); } @@ -128,18 +137,40 @@ a.chip { padding-top: var(--space_sm); padding-bottom: var(--space_sm); } +.py_xl5 { + padding-top: var(--space_xl5); + padding-bottom: var(--space_xl5); +} .mt_0 { margin-top: 0; } +.mt_md { + margin-top: var(--space_md); +} +.mt_xl { + margin-top: var(--space_xl); +} .mt_xl5 { margin-top: var(--space_xl5); } +.mt_xl7 { + margin-top: var(--space_xl7); +} .mr_xs { margin-right: var(--space_xs); } .mb_lg { margin-bottom: var(--space_lg); } +.mb_xl { + margin-bottom: var(--space_xl); +} +.mb_xl5 { + margin-bottom: var(--space_xl5); +} +.gap_sm { + gap: var(--space_sm); +} .gap_xl3 { gap: var(--space_xl3); } diff --git a/src/routes/package.ts b/src/routes/package.ts index 6dd2b4cf..624ff8d6 100644 --- a/src/routes/package.ts +++ b/src/routes/package.ts @@ -25,6 +25,7 @@ export const package_json: Package_Json = { test: 'gro test', preview: 'vite preview', deploy: 'gro deploy', + benchmark: 'vite-node src/lib/run_benchmark.ts', }, type: 'module', engines: {node: '>=22.15'}, @@ -48,6 +49,7 @@ export const package_json: Package_Json = { 'prettier-plugin-svelte': '^3.4.0', svelte: '^5.38.7', 'svelte-check': '^4.3.1', + tinybench: '^5.0.1', tslib: '^2.8.1', typescript: '^5.9.2', 'typescript-eslint': '^8.42.0', @@ -64,37 +66,98 @@ export const package_json: Package_Json = { sideEffects: ['**/*.css'], files: ['dist', 'src/lib/**/*.ts', '!src/lib/**/*.test.*', '!dist/**/*.test.*'], exports: { - '.': {types: './dist/index.d.ts', default: './dist/index.js'}, './package.json': './package.json', - './code_sample_inputs.js': { - types: './dist/code_sample_inputs.d.ts', - default: './dist/code_sample_inputs.js', - }, - './code_sample_outputs.js': { - types: './dist/code_sample_outputs.d.ts', - default: './dist/code_sample_outputs.js', - }, - './Code.svelte': { - types: './dist/Code.svelte.d.ts', - svelte: './dist/Code.svelte', - default: './dist/Code.svelte', - }, - './grammar_clike.js': {types: './dist/grammar_clike.d.ts', default: './dist/grammar_clike.js'}, - './grammar_css.js': {types: './dist/grammar_css.d.ts', default: './dist/grammar_css.js'}, - './grammar_js.js': {types: './dist/grammar_js.d.ts', default: './dist/grammar_js.js'}, - './grammar_json.js': {types: './dist/grammar_json.d.ts', default: './dist/grammar_json.js'}, - './grammar_markup.js': { - types: './dist/grammar_markup.d.ts', - default: './dist/grammar_markup.js', - }, - './grammar_svelte.js': { - types: './dist/grammar_svelte.d.ts', - default: './dist/grammar_svelte.js', - }, - './grammar_ts.js': {types: './dist/grammar_ts.d.ts', default: './dist/grammar_ts.js'}, - './syntax_styler.js': {types: './dist/syntax_styler.d.ts', default: './dist/syntax_styler.js'}, - './theme_standalone.css': {default: './dist/theme_standalone.css'}, - './theme.css': {default: './dist/theme.css'}, + './benchmark.js': {types: './dist/benchmark.d.ts', default: './dist/benchmark.js'}, + './code_samples.js': {types: './dist/code_samples.d.ts', default: './dist/code_samples.js'}, + './Domstyler_Code.svelte': { + types: './dist/Domstyler_Code.svelte.d.ts', + svelte: './dist/Domstyler_Code.svelte', + default: './dist/Domstyler_Code.svelte', + }, + './domstyler_lang_clike.js': { + types: './dist/domstyler_lang_clike.d.ts', + default: './dist/domstyler_lang_clike.js', + }, + './domstyler_lang_css.js': { + types: './dist/domstyler_lang_css.d.ts', + default: './dist/domstyler_lang_css.js', + }, + './domstyler_lang_html.js': { + types: './dist/domstyler_lang_html.d.ts', + default: './dist/domstyler_lang_html.js', + }, + './domstyler_lang_js.js': { + types: './dist/domstyler_lang_js.d.ts', + default: './dist/domstyler_lang_js.js', + }, + './domstyler_lang_json.js': { + types: './dist/domstyler_lang_json.d.ts', + default: './dist/domstyler_lang_json.js', + }, + './domstyler_lang_svelte.js': { + types: './dist/domstyler_lang_svelte.d.ts', + default: './dist/domstyler_lang_svelte.js', + }, + './domstyler_lang_ts.js': { + types: './dist/domstyler_lang_ts.d.ts', + default: './dist/domstyler_lang_ts.js', + }, + './domstyler_theme_standalone.css': {default: './dist/domstyler_theme_standalone.css'}, + './domstyler_theme.css': {default: './dist/domstyler_theme.css'}, + './domstyler.js': {types: './dist/domstyler.d.ts', default: './dist/domstyler.js'}, + './rangestyler_builder.js': { + types: './dist/rangestyler_builder.d.ts', + default: './dist/rangestyler_builder.js', + }, + './Rangestyler_Code.svelte': { + types: './dist/Rangestyler_Code.svelte.d.ts', + svelte: './dist/Rangestyler_Code.svelte', + default: './dist/Rangestyler_Code.svelte', + }, + './rangestyler_lang_css.js': { + types: './dist/rangestyler_lang_css.d.ts', + default: './dist/rangestyler_lang_css.js', + }, + './rangestyler_lang_html.js': { + types: './dist/rangestyler_lang_html.d.ts', + default: './dist/rangestyler_lang_html.js', + }, + './rangestyler_lang_json.js': { + types: './dist/rangestyler_lang_json.d.ts', + default: './dist/rangestyler_lang_json.js', + }, + './rangestyler_lang_svelte.js': { + types: './dist/rangestyler_lang_svelte.d.ts', + default: './dist/rangestyler_lang_svelte.js', + }, + './rangestyler_lang_ts.js': { + types: './dist/rangestyler_lang_ts.d.ts', + default: './dist/rangestyler_lang_ts.js', + }, + './rangestyler_theme.css': {default: './dist/rangestyler_theme.css'}, + './rangestyler_types.js': { + types: './dist/rangestyler_types.d.ts', + default: './dist/rangestyler_types.js', + }, + './rangestyler.js': {types: './dist/rangestyler.d.ts', default: './dist/rangestyler.js'}, + './run_benchmark.js': {types: './dist/run_benchmark.d.ts', default: './dist/run_benchmark.js'}, + './samples/all.gen.js': { + types: './dist/samples/all.gen.d.ts', + default: './dist/samples/all.gen.js', + }, + './samples/all.js': {types: './dist/samples/all.d.ts', default: './dist/samples/all.js'}, + './samples/sample.css': {default: './dist/samples/sample.css'}, + './samples/sample.html': {default: './dist/samples/sample.html'}, + './samples/sample.json': {default: './dist/samples/sample.json'}, + './samples/sample.svelte': { + types: './dist/samples/sample.svelte.d.ts', + svelte: './dist/samples/sample.svelte', + default: './dist/samples/sample.svelte', + }, + './samples/sample.js': { + types: './dist/samples/sample.d.ts', + default: './dist/samples/sample.js', + }, }, } as any; @@ -102,70 +165,80 @@ export const src_json: Src_Json = { name: '@ryanatkn/fuz_code', version: '0.24.0', modules: { - '.': {path: 'index.ts', declarations: [{name: 'syntax_styler', kind: 'variable'}]}, './package.json': {path: 'package.json', declarations: [{name: 'default', kind: 'json'}]}, - './code_sample_inputs.js': { - path: 'code_sample_inputs.ts', + './benchmark.js': { + path: 'benchmark.ts', declarations: [ - {name: 'sample_json_code', kind: 'variable'}, - {name: 'sample_html_code', kind: 'variable'}, - {name: 'sample_css_code', kind: 'variable'}, - {name: 'sample_ts_code', kind: 'variable'}, - {name: 'sample_svelte_code', kind: 'variable'}, - {name: 'samples', kind: 'variable'}, + {name: 'Benchmark_Result', kind: 'type'}, + {name: 'run_benchmark', kind: 'function'}, + {name: 'format_benchmark_results', kind: 'function'}, + {name: 'run_and_print_benchmark', kind: 'function'}, ], }, - './code_sample_outputs.js': { - path: 'code_sample_outputs.ts', + './code_samples.js': { + path: 'code_samples.ts', declarations: [ - {name: 'styled_json_code', kind: 'variable'}, - {name: 'styled_html_code', kind: 'variable'}, - {name: 'styled_css_code', kind: 'variable'}, - {name: 'styled_ts_code', kind: 'variable'}, - {name: 'styled_svelte_code', kind: 'variable'}, + {name: 'Code_Sample', kind: 'type'}, + {name: 'sample_json', kind: 'variable'}, + {name: 'sample_html', kind: 'variable'}, + {name: 'sample_css', kind: 'variable'}, + {name: 'sample_ts', kind: 'variable'}, + {name: 'sample_svelte', kind: 'variable'}, + {name: 'samples', kind: 'variable'}, ], }, - './Code.svelte': {path: 'Code.svelte', declarations: [{name: 'default', kind: 'component'}]}, - './grammar_clike.js': { - path: 'grammar_clike.ts', - declarations: [{name: 'add_grammar_clike', kind: 'function'}], - }, - './grammar_css.js': { - path: 'grammar_css.ts', - declarations: [{name: 'add_grammar_css', kind: 'function'}], + './Domstyler_Code.svelte': { + path: 'Domstyler_Code.svelte', + declarations: [{name: 'default', kind: 'component'}], }, - './grammar_js.js': { - path: 'grammar_js.ts', - declarations: [{name: 'add_grammar_js', kind: 'function'}], + './domstyler_lang_clike.js': { + path: 'domstyler_lang_clike.ts', + declarations: [{name: 'add_domstyler_grammar_clike', kind: 'function'}], }, - './grammar_json.js': { - path: 'grammar_json.ts', - declarations: [{name: 'add_grammar_json', kind: 'function'}], + './domstyler_lang_css.js': { + path: 'domstyler_lang_css.ts', + declarations: [{name: 'add_domstyler_grammar_css', kind: 'function'}], }, - './grammar_markup.js': { - path: 'grammar_markup.ts', + './domstyler_lang_html.js': { + path: 'domstyler_lang_html.ts', declarations: [ - {name: 'add_grammar_markup', kind: 'function'}, + {name: 'add_domstyler_grammar_markup', kind: 'function'}, {name: 'grammar_markup_add_inlined', kind: 'function'}, {name: 'grammar_markup_add_attribute', kind: 'function'}, ], }, - './grammar_svelte.js': { - path: 'grammar_svelte.ts', + './domstyler_lang_js.js': { + path: 'domstyler_lang_js.ts', + declarations: [{name: 'add_domstyler_grammar_js', kind: 'function'}], + }, + './domstyler_lang_json.js': { + path: 'domstyler_lang_json.ts', + declarations: [{name: 'add_domstyler_grammar_json', kind: 'function'}], + }, + './domstyler_lang_svelte.js': { + path: 'domstyler_lang_svelte.ts', declarations: [ - {name: 'add_grammar_svelte', kind: 'function'}, + {name: 'add_domstyler_grammar_svelte', kind: 'function'}, {name: 'grammar_svelte_add_inlined', kind: 'function'}, ], }, - './grammar_ts.js': { - path: 'grammar_ts.ts', - declarations: [{name: 'add_grammar_ts', kind: 'function'}], + './domstyler_lang_ts.js': { + path: 'domstyler_lang_ts.ts', + declarations: [{name: 'add_domstyler_grammar_ts', kind: 'function'}], + }, + './domstyler_theme_standalone.css': { + path: 'domstyler_theme_standalone.css', + declarations: [{name: 'default', kind: 'css'}], + }, + './domstyler_theme.css': { + path: 'domstyler_theme.css', + declarations: [{name: 'default', kind: 'css'}], }, - './syntax_styler.js': { - path: 'syntax_styler.ts', + './domstyler.js': { + path: 'domstyler.ts', declarations: [ - {name: 'Add_Grammar', kind: 'type'}, - {name: 'Syntax_Styler', kind: 'class'}, + {name: 'Add_Domstyler_Grammar', kind: 'type'}, + {name: 'Domstyler', kind: 'class'}, {name: 'Grammar_Value', kind: 'type'}, {name: 'Grammar', kind: 'type'}, {name: 'Grammar_Token', kind: 'type'}, @@ -178,13 +251,100 @@ export const src_json: Src_Json = { {name: 'Hook_Before_Tokenize_Callback_Context', kind: 'type'}, {name: 'Hook_After_Tokenize_Callback_Context', kind: 'type'}, {name: 'Hook_Wrap_Callback_Context', kind: 'type'}, + {name: 'domstyler', kind: 'variable'}, + ], + }, + './rangestyler_builder.js': { + path: 'rangestyler_builder.ts', + declarations: [ + {name: 'create_text_node', kind: 'function'}, + {name: 'find_matches', kind: 'function'}, + {name: 'resolve_overlaps', kind: 'function'}, + {name: 'create_ranges', kind: 'function'}, + {name: 'build_ranges', kind: 'function'}, + {name: 'generate_html_fallback', kind: 'function'}, + ], + }, + './Rangestyler_Code.svelte': { + path: 'Rangestyler_Code.svelte', + declarations: [{name: 'default', kind: 'component'}], + }, + './rangestyler_lang_css.js': { + path: 'rangestyler_lang_css.ts', + declarations: [{name: 'css_language', kind: 'variable'}], + }, + './rangestyler_lang_html.js': { + path: 'rangestyler_lang_html.ts', + declarations: [{name: 'html_language', kind: 'variable'}], + }, + './rangestyler_lang_json.js': { + path: 'rangestyler_lang_json.ts', + declarations: [{name: 'json_language', kind: 'variable'}], + }, + './rangestyler_lang_svelte.js': { + path: 'rangestyler_lang_svelte.ts', + declarations: [{name: 'svelte_language', kind: 'variable'}], + }, + './rangestyler_lang_ts.js': { + path: 'rangestyler_lang_ts.ts', + declarations: [{name: 'ts_language', kind: 'variable'}], + }, + './rangestyler_theme.css': { + path: 'rangestyler_theme.css', + declarations: [{name: 'default', kind: 'css'}], + }, + './rangestyler_types.js': { + path: 'rangestyler_types.ts', + declarations: [ + {name: 'Rangestyler_Pattern', kind: 'type'}, + {name: 'Rangestyler_Language', kind: 'type'}, + {name: 'Match_Result', kind: 'type'}, ], }, - './theme_standalone.css': { - path: 'theme_standalone.css', + './rangestyler.js': { + path: 'rangestyler.ts', + declarations: [ + {name: 'supports_highlight_api', kind: 'function'}, + {name: 'Rangestyler', kind: 'class'}, + {name: 'rangestyler_global', kind: 'variable'}, + ], + }, + './run_benchmark.js': {path: 'run_benchmark.ts'}, + './samples/all.gen.js': { + path: 'samples/all.gen.ts', + declarations: [{name: 'gen', kind: 'function'}], + }, + './samples/all.js': { + path: 'samples/all.ts', + declarations: [{name: 'samples', kind: 'variable'}], + }, + './samples/sample.css': { + path: 'samples/sample.css', declarations: [{name: 'default', kind: 'css'}], }, - './theme.css': {path: 'theme.css', declarations: [{name: 'default', kind: 'css'}]}, + './samples/sample.html': {path: 'samples/sample.html'}, + './samples/sample.json': { + path: 'samples/sample.json', + declarations: [{name: 'default', kind: 'json'}], + }, + './samples/sample.svelte': { + path: 'samples/sample.svelte', + declarations: [{name: 'default', kind: 'component'}], + }, + './samples/sample.js': { + path: 'samples/sample.ts', + declarations: [ + {name: 'add', kind: 'function'}, + {name: 'Some_Type', kind: 'type'}, + {name: 'a', kind: 'variable'}, + {name: 'b', kind: 'variable'}, + {name: 'c', kind: 'variable'}, + {name: 'D', kind: 'class'}, + {name: 'Some_E', kind: 'type'}, + {name: 'some_e', kind: 'variable'}, + {name: 'plus', kind: 'function'}, + ], + }, }, } as any; diff --git a/src/routes/rangestyler/+page.svelte b/src/routes/rangestyler/+page.svelte new file mode 100644 index 00000000..708ed8c4 --- /dev/null +++ b/src/routes/rangestyler/+page.svelte @@ -0,0 +1,37 @@ + + +
+ 🎨 +
+

Rangestyler

+

+ The Rangestyler is a fork of Prism + by Lea Verou. +

+
+
+ {#each samples as sample (sample.name)} +
+

+ {sample.name} '{sample.lang}' +

+
+
+ {/each} +
+
+
+ + diff --git a/src/routes/samples/+page.svelte b/src/routes/samples/+page.svelte deleted file mode 100644 index e0abff52..00000000 --- a/src/routes/samples/+page.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - -
- 🎨 -
- {#each samples as { content, lang } (lang)} -
-

{lang}

-
-
- {/each} -
-
- - diff --git a/src/update_tests.task.ts b/src/update_tests.task.ts index 78823136..45d7b464 100644 --- a/src/update_tests.task.ts +++ b/src/update_tests.task.ts @@ -1,22 +1,19 @@ import type {Task} from '@ryanatkn/gro'; -import {format_file} from '@ryanatkn/gro/format_file.js'; import {writeFileSync} from 'node:fs'; -import {samples} from '$lib/code_sample_inputs.js'; -import {syntax_styler} from '$lib/index.js'; +import {samples} from './lib/samples/all.js'; +import {domstyler_global} from './lib/domstyler_global.js'; -// TODO better way to do this? can't use gen because we want it to be opt-in, unless a new feature is added +// TODO better snapshot support export const task: Task = { - summary: 'update tests with current behavior', + summary: 'update test fixtures with current behavior', run: async () => { - const path = 'src/lib/code_sample_outputs.ts'; - - const contents = `// code_sample_outputs.ts - -${samples.map(({content, lang}) => `export const styled_${lang}_code = ${JSON.stringify(syntax_styler.stylize(content, lang))};`).join('\n\n')} -`; - - writeFileSync(path, await format_file(contents, {filepath: path})); + for (const [lang, content] of Object.entries(samples)) { + const styled = domstyler_global.stylize(content, lang); + const fixture_path = `src/fixtures/styled_html_outputs/${lang}.html`; + writeFileSync(fixture_path, styled); + console.log(`updated fixture: ${fixture_path}`); + } }, }; From 68ae896a7768a695bd920fa088e84078bb0938ee Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:22:23 -0400 Subject: [PATCH 002/125] wip --- BENCHMARK_BASELINE.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/BENCHMARK_BASELINE.md b/BENCHMARK_BASELINE.md index dc518943..77c285df 100644 --- a/BENCHMARK_BASELINE.md +++ b/BENCHMARK_BASELINE.md @@ -16,3 +16,14 @@ Date: 2025-09-13 **Total samples benchmarked:** 5 **Average ops/sec:** 28703.29 + +| Sample | Ops/sec | Mean Time (ms) | Samples | +| ------ | -------- | -------------- | ------- | +| json | 76123.57 | 0.0136 | 367787 | +| html | 14254.46 | 0.0714 | 70060 | +| css | 42429.14 | 0.0240 | 208269 | +| ts | 8304.00 | 0.1218 | 41065 | +| svelte | 2568.42 | 0.3947 | 12667 | + +**Total samples benchmarked:** 5 +**Average ops/sec:** 28735.92 From 30ea58d7173704f3c6dd97a57d66a39554fc5087 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:24:29 -0400 Subject: [PATCH 003/125] wip --- TODO_HIGHLIGHT.md | 85 ++++++++--------------------------------------- 1 file changed, 13 insertions(+), 72 deletions(-) diff --git a/TODO_HIGHLIGHT.md b/TODO_HIGHLIGHT.md index 9172f8a6..da5614ee 100644 --- a/TODO_HIGHLIGHT.md +++ b/TODO_HIGHLIGHT.md @@ -1,79 +1,17 @@ # CSS Custom Highlight API Implementation -## Status: Phase 1 Complete ✅ - -Alternative syntax highlighter using CSS Custom Highlight API for improved performance. - -**Current Performance**: ~2x faster in supported browsers -**Browser Support**: Chrome 105+, Safari 15.4+, Firefox 110+, Edge 105+ -**Fallback**: Automatic HTML generation for unsupported browsers - -## Architecture - -``` -src/lib/highlight/ -├── highlight_styler.ts # Main class with language registry -├── range_builder.ts # Pattern matching → Range conversion -├── types.ts # Core types (Pattern, Highlight_Language) -├── language_ts.ts # TypeScript patterns -├── language_json.ts # JSON patterns -├── language_css.ts # CSS patterns -├── language_html.ts # HTML patterns -├── language_svelte.ts # Svelte patterns -├── Highlight_Code.svelte # Component wrapper -├── theme_highlight.css # ::highlight() pseudo-element styles -└── index.ts # Public API with highlight_styler_global -``` - -## Core Types - -```typescript -interface Pattern { - name: string; // Token type (e.g., 'comment', 'keyword') - match: RegExp; // Regex pattern - priority?: number; // For overlap resolution (higher wins) - greedy?: boolean; // Continue matching -} - -interface Highlight_Language { - id: string; // Language identifier - patterns: Pattern[]; // Ordered pattern list -} -``` - -## Usage - -```typescript -// Direct API -import {highlight_styler_global} from '$lib/highlight'; -highlight_styler_global.highlight(element, code, 'ts'); - -// Component - -``` - -## Phase 1 Implementation ✅ - -**Completed**: -- [x] Core highlight_styler.ts with pattern matching -- [x] range_builder.ts for Range creation -- [x] Direct CSS.highlights API usage (no wrapper) -- [x] All language definitions (ts, json, css, html, svelte) -- [x] Highlight_Code.svelte component -- [x] Browser support detection with fallback -- [x] Snake_case naming convention -- [x] Theme CSS with ::highlight() styles -- [x] Demo page at /highlight -- [x] Benchmark page at /benchmark - -**Performance**: ~6,300 ops/sec (2x current 3,150 ops/sec) in native mode - ## CSS Theme ```css -::highlight(ts_comment) { color: var(--text_color_5); } -::highlight(ts_keyword) { color: var(--color_f_5); } -::highlight(ts_string) { color: var(--color_b_5); } +::highlight(ts_comment) { + color: var(--text_color_5); +} +::highlight(ts_keyword) { + color: var(--color_f_5); +} +::highlight(ts_string) { + color: var(--color_b_5); +} /* ... per language, per token type */ ``` @@ -90,17 +28,20 @@ highlight_styler_global.highlight(element, code, 'ts'); ## Future Work (Phases 2-4) ### Phase 2: Auto-Optimization + - Pattern analysis for optimization opportunities - Keyword Set conversion for faster matching - Character class lookup tables - Compiled pattern caching ### Phase 3: Targeted Optimization + - Specialized scanners for hot paths (strings, comments, numbers) - Custom scanner functions for complex patterns - Performance profiling integration ### Phase 4: Advanced Features + - Incremental updates for editing - Worker pool for large files - JIT optimization for frequently used patterns @@ -112,4 +53,4 @@ highlight_styler_global.highlight(element, code, 'ts'); - **Browser bugs**: Extensive testing, maintain fallback - **Performance regression**: Continuous benchmarking -- **API complexity**: Keep simple API, hide complexity internally \ No newline at end of file +- **API complexity**: Keep simple API, hide complexity internally From a1235d11af9cbf299681357c4ad26e1375fa3fae Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:25:04 -0400 Subject: [PATCH 004/125] wip --- TODO_RESTRUCTURE.md | 256 -------------------------------------------- 1 file changed, 256 deletions(-) delete mode 100644 TODO_RESTRUCTURE.md diff --git a/TODO_RESTRUCTURE.md b/TODO_RESTRUCTURE.md deleted file mode 100644 index 10098718..00000000 --- a/TODO_RESTRUCTURE.md +++ /dev/null @@ -1,256 +0,0 @@ -# Module Restructuring Plan - -## Overview - -Restructure the codebase to use clearer naming with `domstyler` and `rangestyler` prefixes, remove all barrel files, and flatten to a single directory. - -## File Mapping - -### DOM Styler (Current → New) - -``` -src/lib/syntax_styler.ts → src/lib/domstyler.ts -src/lib/syntax_styler.test.ts → src/lib/domstyler_test.ts -src/lib/Code.svelte → src/lib/Domstyler_Code.svelte -src/lib/grammar_js.ts → src/lib/domstyler_lang_js.ts -src/lib/grammar_ts.ts → src/lib/domstyler_lang_ts.ts -src/lib/grammar_css.ts → src/lib/domstyler_lang_css.ts -src/lib/grammar_markup.ts → src/lib/domstyler_lang_html.ts -src/lib/grammar_json.ts → src/lib/domstyler_lang_json.ts -src/lib/grammar_svelte.ts → src/lib/domstyler_lang_svelte.ts -src/lib/grammar_clike.ts → src/lib/domstyler_lang_clike.ts -src/lib/theme.css → src/lib/domstyler_theme.css -src/lib/theme_standalone.css → src/lib/domstyler_theme_standalone.css -src/lib/index.ts → DELETE (no barrel files) -``` - -### Range Styler (Current → New) - -``` -src/lib/highlight/highlight_styler.ts → src/lib/rangestyler.ts -src/lib/highlight/range_builder.ts → src/lib/rangestyler_builder.ts -src/lib/highlight/types.ts → src/lib/rangestyler_types.ts -src/lib/highlight/Highlight_Code.svelte → src/lib/Rangestyler_Code.svelte -src/lib/highlight/language_ts.ts → src/lib/rangestyler_lang_ts.ts -src/lib/highlight/language_css.ts → src/lib/rangestyler_lang_css.ts -src/lib/highlight/language_html.ts → src/lib/rangestyler_lang_html.ts -src/lib/highlight/language_json.ts → src/lib/rangestyler_lang_json.ts -src/lib/highlight/language_svelte.ts → src/lib/rangestyler_lang_svelte.ts -src/lib/highlight/theme_highlight.css → src/lib/rangestyler_theme.css -src/lib/highlight/index.ts → DELETE (no barrel files) -src/lib/highlight/CLAUDE.md → Move content to root CLAUDE.md -``` - -### Shared Files (Keep As-Is) - -``` -src/lib/code_samples.ts → src/lib/code_samples.ts -src/lib/benchmark.ts → src/lib/benchmark.ts -src/lib/run_benchmark.ts → src/lib/run_benchmark.ts -``` - -## Class/Type/Function Renaming - -### DOM Styler - -```typescript -// domstyler.ts -export class Domstyler { ... } // was Syntax_Styler -export const domstyler = new Domstyler(); // was syntax_styler - -// Types -export type Grammar { ... } // unchanged -export type Grammar_Token { ... } // unchanged -export type Add_Domstyler_Grammar { ... } // unchanged - -// domstyler_lang_*.ts -export const add_domstyler_grammar_js: Add_Domstyler_Grammar = ... // unchanged function names -``` - -### Range Styler - -```typescript -// rangestyler.ts -export class Rangestyler { ... } // was Highlight_Styler -export const rangestyler_global = new Rangestyler(); // was highlight_styler_global - -// rangestyler_types.ts -export interface Pattern { ... } // unchanged -export interface Rangestyler_Language { ... } // was Highlight_Language - -// rangestyler_lang_*.ts -export const ts_language: Rangestyler_Language = ... // unchanged exports -``` - -## Import Updates - -### Before - -```typescript -import {syntax_styler} from '$lib/index.js'; -import {Syntax_Styler} from '$lib/syntax_styler.js'; -import Code from '$lib/Code.svelte'; -import {highlight_styler_global} from '$lib/highlight/index.js'; -import Highlight_Code from '$lib/highlight/Highlight_Code.svelte'; -``` - -### After - -```typescript -import {domstyler} from '$lib/domstyler.js'; -import {Domstyler} from '$lib/domstyler.js'; -import Domstyler_Code from '$lib/Domstyler_Code.svelte'; -import {rangestyler_global} from '$lib/rangestyler.js'; -import Rangestyler_Code from '$lib/Rangestyler_Code.svelte'; -``` - -## CSS Class Updates - -### DOM Styler Theme - -```css -/* domstyler_theme.css */ -.token.comment { ... } /* unchanged */ -.token.string { ... } /* unchanged */ -``` - -### Range Styler Theme - -```css -/* rangestyler_theme.css */ -::highlight(ts_comment) { ... } /* unchanged */ -::highlight(json_property) { ... } /* unchanged */ -``` - -## Migration Steps - -### Phase 1: Move and Rename Files - -1. Move Range Styler files from src/lib/highlight/ to src/lib/: - - ```bash - mv src/lib/highlight/highlight_styler.ts src/lib/rangestyler.ts - mv src/lib/highlight/range_builder.ts src/lib/rangestyler_builder.ts - mv src/lib/highlight/types.ts src/lib/rangestyler_types.ts - mv src/lib/highlight/Highlight_Code.svelte src/lib/Rangestyler_Code.svelte - mv src/lib/highlight/language_ts.ts src/lib/rangestyler_lang_ts.ts - mv src/lib/highlight/language_css.ts src/lib/rangestyler_lang_css.ts - mv src/lib/highlight/language_html.ts src/lib/rangestyler_lang_html.ts - mv src/lib/highlight/language_json.ts src/lib/rangestyler_lang_json.ts - mv src/lib/highlight/language_svelte.ts src/lib/rangestyler_lang_svelte.ts - mv src/lib/highlight/theme_highlight.css src/lib/rangestyler_theme.css - ``` - -2. Rename DOM Styler files in place: - - ```bash - mv src/lib/syntax_styler.ts src/lib/domstyler.ts - mv src/lib/syntax_styler.test.ts src/lib/domstyler_test.ts - mv src/lib/Code.svelte src/lib/Domstyler_Code.svelte - mv src/lib/grammar_js.ts src/lib/domstyler_lang_js.ts - mv src/lib/grammar_ts.ts src/lib/domstyler_lang_ts.ts - mv src/lib/grammar_css.ts src/lib/domstyler_lang_css.ts - mv src/lib/grammar_markup.ts src/lib/domstyler_lang_html.ts - mv src/lib/grammar_json.ts src/lib/domstyler_lang_json.ts - mv src/lib/grammar_svelte.ts src/lib/domstyler_lang_svelte.ts - mv src/lib/grammar_clike.ts src/lib/domstyler_lang_clike.ts - mv src/lib/theme.css src/lib/domstyler_theme.css - mv src/lib/theme_standalone.css src/lib/domstyler_theme_standalone.css - ``` - -3. Delete barrel files and empty directory: - ```bash - rm src/lib/index.ts - rm src/lib/highlight/index.ts - rm -rf src/lib/highlight/ - ``` - -### Phase 2: Update File Contents - -4. Update class names and exports in moved files -5. Update imports within library files -6. Update cross-references between domstyler and rangestyler files - -### Phase 3: Update Consumers - -7. Update all component imports in routes/ -8. Update test imports -9. Update benchmark imports -10. Run tests to verify everything works - -### Phase 4: Documentation - -11. Update root CLAUDE.md -12. Merge src/lib/highlight/CLAUDE.md content into root CLAUDE.md -13. Update package.json exports if needed - -## Component Updates - -### Domstyler_Code.svelte - -```svelte - -``` - -### Rangestyler_Code.svelte - -```svelte - -``` - -## Route Updates - -### /samples/+page.svelte - -```svelte -import Domstyler_Code from '$lib/Domstyler_Code.svelte'; -``` - -### /highlight/+page.svelte - -```svelte -import Rangestyler_Code from '$lib/Rangestyler_Code.svelte'; import '$lib/rangestyler_theme.css'; -``` - -### /compare/+page.svelte - -```svelte -import Domstyler_Code from '$lib/Domstyler_Code.svelte'; import Rangestyler_Code from -'$lib/Rangestyler_Code.svelte'; import '$lib/rangestyler_theme.css'; -``` - -### /benchmark/+page.svelte - -```svelte -import {domstyler} from '$lib/domstyler.js'; import {rangestyler_global} from '$lib/rangestyler.js'; -``` - -## Testing Strategy - -1. Run existing tests after each phase -2. Verify all routes still render correctly -3. Run benchmarks to ensure performance unchanged -4. Test both DOM and Range implementations -5. Verify themes apply correctly - -## Benefits - -- **Clearer naming**: `domstyler` vs `rangestyler` immediately shows implementation -- **No barrel files**: Direct imports are more explicit -- **Flat structure**: Easier to navigate, no nested directories -- **Consistent prefixes**: All related files grouped together -- **Better discoverability**: Can see all files at once in src/lib/ - -## Risks & Mitigation - -- **Breaking imports**: Use find/replace carefully, test thoroughly -- **Missing references**: Search entire codebase for old names -- **Theme conflicts**: Ensure CSS classes don't overlap -- **Documentation drift**: Update all docs in same PR From 4d958fdd377c33620e99239fc7c7f6c7c9a20a90 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:26:51 -0400 Subject: [PATCH 005/125] wip --- src/lib/rangestyler.ts | 4 ++-- src/routes/package.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/rangestyler.ts b/src/lib/rangestyler.ts index 1ed54574..3ee56ce1 100644 --- a/src/lib/rangestyler.ts +++ b/src/lib/rangestyler.ts @@ -9,7 +9,7 @@ import { /** * Check for CSS Highlights API support. */ -export function supports_highlight_api(): boolean { +export function supports_css_highlight_api(): boolean { return ( typeof CSS !== 'undefined' && 'highlights' in CSS && @@ -27,7 +27,7 @@ export class Rangestyler { } get supports_native(): boolean { - return supports_highlight_api(); + return supports_css_highlight_api(); } register_language(language: Rangestyler_Language): void { diff --git a/src/routes/package.ts b/src/routes/package.ts index 624ff8d6..0f58a371 100644 --- a/src/routes/package.ts +++ b/src/routes/package.ts @@ -304,7 +304,7 @@ export const src_json: Src_Json = { './rangestyler.js': { path: 'rangestyler.ts', declarations: [ - {name: 'supports_highlight_api', kind: 'function'}, + {name: 'supports_css_highlight_api', kind: 'function'}, {name: 'Rangestyler', kind: 'class'}, {name: 'rangestyler_global', kind: 'variable'}, ], From 04591c37609af20beca060ca350a572c186a8ef1 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:29:56 -0400 Subject: [PATCH 006/125] wip --- package.json | 12 +++++++++ src/lib/helpers.ts | 7 +++++ src/lib/rangestyler.ts | 11 +++----- src/lib/rangestyler_builder.ts | 48 +++++++++++++++------------------- src/routes/moss.css | 6 ++--- src/routes/package.ts | 30 ++++++++++++++++----- 6 files changed, 70 insertions(+), 44 deletions(-) create mode 100644 src/lib/helpers.ts diff --git a/package.json b/package.json index ab95fad2..0b7be825 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,10 @@ "svelte": "./dist/Domstyler_Code.svelte", "default": "./dist/Domstyler_Code.svelte" }, + "./domstyler_global.js": { + "types": "./dist/domstyler_global.d.ts", + "default": "./dist/domstyler_global.js" + }, "./domstyler_lang_clike.js": { "types": "./dist/domstyler_lang_clike.d.ts", "default": "./dist/domstyler_lang_clike.js" @@ -145,6 +149,10 @@ "types": "./dist/domstyler.d.ts", "default": "./dist/domstyler.js" }, + "./helpers.js": { + "types": "./dist/helpers.d.ts", + "default": "./dist/helpers.js" + }, "./rangestyler_builder.js": { "types": "./dist/rangestyler_builder.d.ts", "default": "./dist/rangestyler_builder.js" @@ -154,6 +162,10 @@ "svelte": "./dist/Rangestyler_Code.svelte", "default": "./dist/Rangestyler_Code.svelte" }, + "./rangestyler_global.js": { + "types": "./dist/rangestyler_global.d.ts", + "default": "./dist/rangestyler_global.js" + }, "./rangestyler_lang_css.js": { "types": "./dist/rangestyler_lang_css.d.ts", "default": "./dist/rangestyler_lang_css.js" diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts new file mode 100644 index 00000000..7509b130 --- /dev/null +++ b/src/lib/helpers.ts @@ -0,0 +1,7 @@ +export const escape_html = (text: string): string => + text + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); diff --git a/src/lib/rangestyler.ts b/src/lib/rangestyler.ts index 3ee56ce1..62d0f7b8 100644 --- a/src/lib/rangestyler.ts +++ b/src/lib/rangestyler.ts @@ -9,13 +9,10 @@ import { /** * Check for CSS Highlights API support. */ -export function supports_css_highlight_api(): boolean { - return ( - typeof CSS !== 'undefined' && - 'highlights' in CSS && - typeof (globalThis as any).Highlight === 'function' - ); -} +export const supports_css_highlight_api = (): boolean => + typeof CSS !== 'undefined' && + 'highlights' in CSS && + typeof (globalThis as any).Highlight === 'function'; export class Rangestyler { private languages: Map; diff --git a/src/lib/rangestyler_builder.ts b/src/lib/rangestyler_builder.ts index 3338212e..53d87050 100644 --- a/src/lib/rangestyler_builder.ts +++ b/src/lib/rangestyler_builder.ts @@ -1,9 +1,10 @@ import type {Rangestyler_Pattern, Rangestyler_Match_Result} from './rangestyler_types.js'; +import {escape_html} from './helpers.js'; /** * Create a text node in an element and return it */ -export function create_text_node(element: Element, text: string): Text { +export const create_text_node = (element: Element, text: string): Text => { // Clear element first element.textContent = ''; @@ -12,15 +13,15 @@ export function create_text_node(element: Element, text: string): Text { element.appendChild(text_node); return text_node; -} +}; /** * Find all pattern matches in text */ -export function find_matches( +export const find_matches = ( text: string, patterns: Array, -): Rangestyler_Match_Result[] { +): Rangestyler_Match_Result[] => { const matches: Rangestyler_Match_Result[] = []; for (const pattern of patterns) { @@ -88,12 +89,14 @@ export function find_matches( }); return matches; -} +}; /** * Remove overlapping matches based on priority */ -export function resolve_overlaps(matches: Rangestyler_Match_Result[]): Rangestyler_Match_Result[] { +export const resolve_overlaps = ( + matches: Rangestyler_Match_Result[], +): Rangestyler_Match_Result[] => { if (matches.length === 0) return []; const resolved: Rangestyler_Match_Result[] = []; @@ -110,15 +113,15 @@ export function resolve_overlaps(matches: Rangestyler_Match_Result[]): Rangestyl } return resolved; -} +}; /** * Create Range objects from matches */ -export function create_ranges( +export const create_ranges = ( text_node: Text, matches: Rangestyler_Match_Result[], -): Map { +): Map => { const ranges_by_name = new Map(); for (const match of matches) { @@ -148,16 +151,16 @@ export function create_ranges( } return ranges_by_name; -} +}; /** * Build ranges from text and patterns */ -export function build_ranges( +export const build_ranges = ( element: Element, text: string, patterns: Array, -): {text_node: Text; ranges_by_name: Map} { +): {text_node: Text; ranges_by_name: Map} => { // Create text node const text_node = create_text_node(element, text); @@ -171,12 +174,15 @@ export function build_ranges( const ranges_by_name = create_ranges(text_node, resolved); return {text_node, ranges_by_name}; -} +}; /** * Generate HTML fallback from matches (for unsupported browsers) */ -export function generate_html_fallback(text: string, matches: Rangestyler_Match_Result[]): string { +export const generate_html_fallback = ( + text: string, + matches: Rangestyler_Match_Result[], +): string => { if (matches.length === 0) { return escape_html(text); } @@ -224,16 +230,4 @@ export function generate_html_fallback(text: string, matches: Rangestyler_Match_ } return html; -} - -/** - * Escape HTML special characters - */ -function escape_html(text: string): string { - return text - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); -} +}; diff --git a/src/routes/moss.css b/src/routes/moss.css index f9daab07..b6d7509f 100644 --- a/src/routes/moss.css +++ b/src/routes/moss.css @@ -2,10 +2,10 @@ /* * * File statistics: - * - Total files in filer: 255 + * - Total files in filer: 258 * - External dependencies: 197 - * - Internal project files: 58 - * - Files processed (passed filter): 227 + * - Internal project files: 61 + * - Files processed (passed filter): 230 * - Files with CSS classes: 24 * - Unique classes found: 41 */ diff --git a/src/routes/package.ts b/src/routes/package.ts index 0f58a371..4eac511b 100644 --- a/src/routes/package.ts +++ b/src/routes/package.ts @@ -74,6 +74,10 @@ export const package_json: Package_Json = { svelte: './dist/Domstyler_Code.svelte', default: './dist/Domstyler_Code.svelte', }, + './domstyler_global.js': { + types: './dist/domstyler_global.d.ts', + default: './dist/domstyler_global.js', + }, './domstyler_lang_clike.js': { types: './dist/domstyler_lang_clike.d.ts', default: './dist/domstyler_lang_clike.js', @@ -105,6 +109,7 @@ export const package_json: Package_Json = { './domstyler_theme_standalone.css': {default: './dist/domstyler_theme_standalone.css'}, './domstyler_theme.css': {default: './dist/domstyler_theme.css'}, './domstyler.js': {types: './dist/domstyler.d.ts', default: './dist/domstyler.js'}, + './helpers.js': {types: './dist/helpers.d.ts', default: './dist/helpers.js'}, './rangestyler_builder.js': { types: './dist/rangestyler_builder.d.ts', default: './dist/rangestyler_builder.js', @@ -114,6 +119,10 @@ export const package_json: Package_Json = { svelte: './dist/Rangestyler_Code.svelte', default: './dist/Rangestyler_Code.svelte', }, + './rangestyler_global.js': { + types: './dist/rangestyler_global.d.ts', + default: './dist/rangestyler_global.js', + }, './rangestyler_lang_css.js': { types: './dist/rangestyler_lang_css.d.ts', default: './dist/rangestyler_lang_css.js', @@ -191,6 +200,10 @@ export const src_json: Src_Json = { path: 'Domstyler_Code.svelte', declarations: [{name: 'default', kind: 'component'}], }, + './domstyler_global.js': { + path: 'domstyler_global.ts', + declarations: [{name: 'domstyler_global', kind: 'variable'}], + }, './domstyler_lang_clike.js': { path: 'domstyler_lang_clike.ts', declarations: [{name: 'add_domstyler_grammar_clike', kind: 'function'}], @@ -203,8 +216,8 @@ export const src_json: Src_Json = { path: 'domstyler_lang_html.ts', declarations: [ {name: 'add_domstyler_grammar_markup', kind: 'function'}, - {name: 'grammar_markup_add_inlined', kind: 'function'}, - {name: 'grammar_markup_add_attribute', kind: 'function'}, + {name: 'domstyler_grammar_markup_add_inlined', kind: 'function'}, + {name: 'domstyler_grammar_markup_add_attribute', kind: 'function'}, ], }, './domstyler_lang_js.js': { @@ -219,7 +232,7 @@ export const src_json: Src_Json = { path: 'domstyler_lang_svelte.ts', declarations: [ {name: 'add_domstyler_grammar_svelte', kind: 'function'}, - {name: 'grammar_svelte_add_inlined', kind: 'function'}, + {name: 'domstyler_grammar_svelte_add_inlined', kind: 'function'}, ], }, './domstyler_lang_ts.js': { @@ -251,9 +264,9 @@ export const src_json: Src_Json = { {name: 'Hook_Before_Tokenize_Callback_Context', kind: 'type'}, {name: 'Hook_After_Tokenize_Callback_Context', kind: 'type'}, {name: 'Hook_Wrap_Callback_Context', kind: 'type'}, - {name: 'domstyler', kind: 'variable'}, ], }, + './helpers.js': {path: 'helpers.ts', declarations: [{name: 'escape_html', kind: 'function'}]}, './rangestyler_builder.js': { path: 'rangestyler_builder.ts', declarations: [ @@ -269,6 +282,10 @@ export const src_json: Src_Json = { path: 'Rangestyler_Code.svelte', declarations: [{name: 'default', kind: 'component'}], }, + './rangestyler_global.js': { + path: 'rangestyler_global.ts', + declarations: [{name: 'rangestyler_global', kind: 'variable'}], + }, './rangestyler_lang_css.js': { path: 'rangestyler_lang_css.ts', declarations: [{name: 'css_language', kind: 'variable'}], @@ -296,9 +313,9 @@ export const src_json: Src_Json = { './rangestyler_types.js': { path: 'rangestyler_types.ts', declarations: [ - {name: 'Rangestyler_Pattern', kind: 'type'}, {name: 'Rangestyler_Language', kind: 'type'}, - {name: 'Match_Result', kind: 'type'}, + {name: 'Rangestyler_Pattern', kind: 'type'}, + {name: 'Rangestyler_Match_Result', kind: 'type'}, ], }, './rangestyler.js': { @@ -306,7 +323,6 @@ export const src_json: Src_Json = { declarations: [ {name: 'supports_css_highlight_api', kind: 'function'}, {name: 'Rangestyler', kind: 'class'}, - {name: 'rangestyler_global', kind: 'variable'}, ], }, './run_benchmark.js': {path: 'run_benchmark.ts'}, From 5bedcdbf17f8153de9b5840137eddb38df15e8f2 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:34:15 -0400 Subject: [PATCH 007/125] wip --- src/fixtures/styled_html_outputs/ts.html | 6 +++--- src/lib/benchmark.ts | 8 ++++---- src/lib/code_samples.ts | 2 +- src/lib/rangestyler.ts | 4 ++-- src/lib/rangestyler_builder.ts | 20 ++++++++++---------- src/lib/run_benchmark.ts | 2 +- src/lib/samples/all.ts | 6 +++--- src/lib/samples/sample.ts | 6 +++--- src/update_tests.task.ts | 6 +++--- 9 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/fixtures/styled_html_outputs/ts.html b/src/fixtures/styled_html_outputs/ts.html index ae121653..64c932cd 100644 --- a/src/fixtures/styled_html_outputs/ts.html +++ b/src/fixtures/styled_html_outputs/ts.html @@ -19,7 +19,7 @@ return `Hello, ${this.d1}`; } - instance_method = () => { + instance_method = (): void => { /* ... */ this.#private_method(); // foo @@ -29,8 +29,8 @@ throw new Error(`${this.d1} etc`); } - protected protected_method() { - console.log(new RegExp('protected')); + protected protected_method(): void { + console.log(new Date()); // eslint-disable-line no-console } } diff --git a/src/lib/benchmark.ts b/src/lib/benchmark.ts index 5ef52485..48f5c054 100644 --- a/src/lib/benchmark.ts +++ b/src/lib/benchmark.ts @@ -9,7 +9,7 @@ export interface Benchmark_Result { samples: number; } -export const run_benchmark = async (filter?: string): Promise => { +export const run_benchmark = async (filter?: string): Promise> => { const bench = new Bench({ time: 5000, warmupTime: 1000, @@ -28,7 +28,7 @@ export const run_benchmark = async (filter?: string): Promise = []; for (const task of bench.tasks) { if (task && task.result) { @@ -44,8 +44,8 @@ export const run_benchmark = async (filter?: string): Promise { - const lines: string[] = [ +export const format_benchmark_results = (results: Array): string => { + const lines: Array = [ '## Benchmark Results', '', '| Sample | Ops/sec | Mean Time (ms) | Samples |', diff --git a/src/lib/code_samples.ts b/src/lib/code_samples.ts index 03e47709..82654c49 100644 --- a/src/lib/code_samples.ts +++ b/src/lib/code_samples.ts @@ -36,7 +36,7 @@ export const sample_svelte: Code_Sample = { content: sample_content.svelte, }; -export const samples: Code_Sample[] = [ +export const samples: Array = [ sample_json, sample_html, sample_css, diff --git a/src/lib/rangestyler.ts b/src/lib/rangestyler.ts index 62d0f7b8..11090a1e 100644 --- a/src/lib/rangestyler.ts +++ b/src/lib/rangestyler.ts @@ -16,7 +16,7 @@ export const supports_css_highlight_api = (): boolean => export class Rangestyler { private languages: Map; - private active_highlights: Map; + private active_highlights: Map>; constructor() { this.languages = new Map(); @@ -65,7 +65,7 @@ export class Rangestyler { const {ranges_by_name} = build_ranges(element, text, patterns); // Register highlights - const highlight_names: string[] = []; + const highlight_names: Array = []; for (const [name, ranges] of ranges_by_name) { const highlight_name = `${prefix}_${name}`; diff --git a/src/lib/rangestyler_builder.ts b/src/lib/rangestyler_builder.ts index 53d87050..d1d02da4 100644 --- a/src/lib/rangestyler_builder.ts +++ b/src/lib/rangestyler_builder.ts @@ -21,8 +21,8 @@ export const create_text_node = (element: Element, text: string): Text => { export const find_matches = ( text: string, patterns: Array, -): Rangestyler_Match_Result[] => { - const matches: Rangestyler_Match_Result[] = []; +): Array => { + const matches: Array = []; for (const pattern of patterns) { const regex = pattern.match; @@ -95,11 +95,11 @@ export const find_matches = ( * Remove overlapping matches based on priority */ export const resolve_overlaps = ( - matches: Rangestyler_Match_Result[], -): Rangestyler_Match_Result[] => { + matches: Array, +): Array => { if (matches.length === 0) return []; - const resolved: Rangestyler_Match_Result[] = []; + const resolved: Array = []; let last_end = -1; for (const match of matches) { @@ -120,9 +120,9 @@ export const resolve_overlaps = ( */ export const create_ranges = ( text_node: Text, - matches: Rangestyler_Match_Result[], -): Map => { - const ranges_by_name = new Map(); + matches: Array, +): Map> => { + const ranges_by_name = new Map>(); for (const match of matches) { const name = match.pattern.name; @@ -160,7 +160,7 @@ export const build_ranges = ( element: Element, text: string, patterns: Array, -): {text_node: Text; ranges_by_name: Map} => { +): {text_node: Text; ranges_by_name: Map>} => { // Create text node const text_node = create_text_node(element, text); @@ -181,7 +181,7 @@ export const build_ranges = ( */ export const generate_html_fallback = ( text: string, - matches: Rangestyler_Match_Result[], + matches: Array, ): string => { if (matches.length === 0) { return escape_html(text); diff --git a/src/lib/run_benchmark.ts b/src/lib/run_benchmark.ts index 5f130131..793ba930 100644 --- a/src/lib/run_benchmark.ts +++ b/src/lib/run_benchmark.ts @@ -8,6 +8,6 @@ run_and_print_benchmark(filter) process.exit(0); }) .catch((error) => { - console.error('Benchmark failed:', error); + console.error('benchmark failed:', error); // eslint-disable-line no-console process.exit(1); }); diff --git a/src/lib/samples/all.ts b/src/lib/samples/all.ts index 4c70026c..3c53f895 100644 --- a/src/lib/samples/all.ts +++ b/src/lib/samples/all.ts @@ -272,7 +272,7 @@ class D { return \`Hello, \${this.d1}\`; } - instance_method = () => { + instance_method = (): void => { /* ... */ this.#private_method(); // foo @@ -282,8 +282,8 @@ class D { throw new Error(\`\${this.d1} etc\`); } - protected protected_method() { - console.log(new RegExp('protected')); + protected protected_method(): void { + console.log(new Date()); // eslint-disable-line no-console } } diff --git a/src/lib/samples/sample.ts b/src/lib/samples/sample.ts index 9b02dae5..6735232c 100644 --- a/src/lib/samples/sample.ts +++ b/src/lib/samples/sample.ts @@ -19,7 +19,7 @@ class D { return `Hello, ${this.d1}`; } - instance_method = () => { + instance_method = (): void => { /* ... */ this.#private_method(); // foo @@ -29,8 +29,8 @@ class D { throw new Error(`${this.d1} etc`); } - protected protected_method() { - console.log(new RegExp('protected')); + protected protected_method(): void { + console.log(new Date()); // eslint-disable-line no-console } } diff --git a/src/update_tests.task.ts b/src/update_tests.task.ts index 45d7b464..d51f95c3 100644 --- a/src/update_tests.task.ts +++ b/src/update_tests.task.ts @@ -8,12 +8,12 @@ import {domstyler_global} from './lib/domstyler_global.js'; export const task: Task = { summary: 'update test fixtures with current behavior', - run: async () => { + run: () => { for (const [lang, content] of Object.entries(samples)) { const styled = domstyler_global.stylize(content, lang); - const fixture_path = `src/fixtures/styled_html_outputs/${lang}.html`; + const fixture_path = `./src/fixtures/styled_html_outputs/${lang}.html`; writeFileSync(fixture_path, styled); - console.log(`updated fixture: ${fixture_path}`); + console.log(`updated fixture: ${fixture_path}`); // eslint-disable-line no-console } }, }; From 8515c5ef5c627398faaca3d3b1cdc3af1292ab63 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:36:23 -0400 Subject: [PATCH 008/125] wip --- src/lib/benchmark.ts | 4 +++- src/lib/domstyler_lang_html.ts | 3 +-- src/lib/rangestyler.ts | 4 ++-- src/lib/rangestyler_builder.ts | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/lib/benchmark.ts b/src/lib/benchmark.ts index 48f5c054..2928ce50 100644 --- a/src/lib/benchmark.ts +++ b/src/lib/benchmark.ts @@ -2,6 +2,8 @@ import {Bench} from 'tinybench'; import {samples} from './code_samples.js'; import {domstyler_global} from './domstyler_global.js'; +/* eslint-disable no-console */ + export interface Benchmark_Result { name: string; ops_per_sec: number; @@ -31,7 +33,7 @@ export const run_benchmark = async (filter?: string): Promise = []; for (const task of bench.tasks) { - if (task && task.result) { + if (task.result) { results.push({ name: task.name, ops_per_sec: task.result.throughput.mean, diff --git a/src/lib/domstyler_lang_html.ts b/src/lib/domstyler_lang_html.ts index 60d9128b..9b027c32 100644 --- a/src/lib/domstyler_lang_html.ts +++ b/src/lib/domstyler_lang_html.ts @@ -1,5 +1,4 @@ -import type {Add_Domstyler_Grammar, Grammar, Grammar_Token} from '$lib/domstyler.js'; -import type {Domstyler} from '$lib/domstyler.js'; +import type {Domstyler, Add_Domstyler_Grammar, Grammar, Grammar_Token} from '$lib/domstyler.js'; /** * Based on Prism (https://github.com/PrismJS/prism) diff --git a/src/lib/rangestyler.ts b/src/lib/rangestyler.ts index 11090a1e..bf2d3fe9 100644 --- a/src/lib/rangestyler.ts +++ b/src/lib/rangestyler.ts @@ -38,7 +38,7 @@ export class Rangestyler { highlight(element: Element, text: string, lang_id: string): void { const language = this.get_language(lang_id); if (!language) { - console.warn(`Language "${lang_id}" not found`); + console.error(`Language "${lang_id}" not found`); // eslint-disable-line no-console element.textContent = text; return; } @@ -77,7 +77,7 @@ export class Rangestyler { const highlight = new (globalThis as any).Highlight(...ranges); (CSS as any).highlights.set(highlight_name, highlight); } catch (error) { - console.warn(`Failed to register highlight "${highlight_name}":`, error); + console.error(`Failed to register highlight "${highlight_name}":`, error); // eslint-disable-line no-console } } } diff --git a/src/lib/rangestyler_builder.ts b/src/lib/rangestyler_builder.ts index d1d02da4..3f0ad287 100644 --- a/src/lib/rangestyler_builder.ts +++ b/src/lib/rangestyler_builder.ts @@ -122,7 +122,7 @@ export const create_ranges = ( text_node: Text, matches: Array, ): Map> => { - const ranges_by_name = new Map>(); + const ranges_by_name: Map> = new Map(); for (const match of matches) { const name = match.pattern.name; From fca2b4b8b45e1015799135ed48f9a9558301f3a4 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:36:43 -0400 Subject: [PATCH 009/125] wip --- src/fixtures/styled_html_outputs/css.html | 51 +- src/fixtures/styled_html_outputs/html.html | 155 ++++- src/fixtures/styled_html_outputs/json.html | 24 +- src/fixtures/styled_html_outputs/svelte.html | 660 +++++++++++++++---- src/fixtures/styled_html_outputs/ts.html | 202 ++++-- 5 files changed, 861 insertions(+), 231 deletions(-) diff --git a/src/fixtures/styled_html_outputs/css.html b/src/fixtures/styled_html_outputs/css.html index 5b78d4f5..63c1c5bf 100644 --- a/src/fixtures/styled_html_outputs/css.html +++ b/src/fixtures/styled_html_outputs/css.html @@ -1,35 +1,54 @@ .some_class { - color: red; +color: red; } .hypen-class { - font-size: 16px; +font-size: 16px; } p { - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +box-shadow: 0 0 10px +rgba(0, +0, 0, 0.1); } /* comment */ -/* -multi -line - -<comment> - -*/ +/* multi line <comment> */ #unique_id { - background-color: blue; +background-color: blue; } div > p { - margin: 10px; +margin: 10px; } -@media (max-width: 600px) { - body { - background-color: lightblue; - } +@media (max-width: 600px) +{ body +{ background-color: lightblue; +} } diff --git a/src/fixtures/styled_html_outputs/html.html b/src/fixtures/styled_html_outputs/html.html index 88abbef1..cd8883d0 100644 --- a/src/fixtures/styled_html_outputs/html.html +++ b/src/fixtures/styled_html_outputs/html.html @@ -1,34 +1,149 @@ <!doctype html> -<div class="test"> - <p>hello world!</p> -</div> +<div + class="test"> +<p>hello world!</p> +</div> -<p class="some_class hypen-class">some <span class="a b c">text</span></p> +<p + class="some_class hypen-class">some +<span + class="a b + c">text</span></p> -<button type="button" disabled>click me</button> +<button + type="button" + disabled>click me</button> <!-- comment <div>a<br /> b</div> --> -<br /> +<br + /> -<hr /> +<hr + /> -<img src="image.jpg" alt="access" /> +<img + src="image.jpg" + alt="access" + /> -<ul> - <li>list item 1</li> - <li>list item 2</li> -</ul> +<ul> +<li>list item 1</li> +<li>list item 2</li> +</ul> -<script type="text/javascript"> - const ok = 'yes'; -</script> +<script + type="text/javascript"> + const ok = + 'yes'; + </script> -<style type="text/css"> - .special::before { - content: '< & >'; - } -</style> +<style + type="text/css"> + .special::before { + content: + '< & >'; + } + </style> <![CDATA[ if (a < 0) alert("b"); <not-a-tag> ]]> diff --git a/src/fixtures/styled_html_outputs/json.html b/src/fixtures/styled_html_outputs/json.html index 1d12ae4e..755dca76 100644 --- a/src/fixtures/styled_html_outputs/json.html +++ b/src/fixtures/styled_html_outputs/json.html @@ -1,9 +1,17 @@ -{ - "string": "a string", - "number": 12345, - "boolean": true, - "null": null, - "object": { - "array": [1, "b", false] - } +{ "string": "a string", "number": 12345, "boolean": true, "null": null, "object": { +"array": +[1, "b", false] +} } diff --git a/src/fixtures/styled_html_outputs/svelte.html b/src/fixtures/styled_html_outputs/svelte.html index 578070c8..5562ef1e 100644 --- a/src/fixtures/styled_html_outputs/svelte.html +++ b/src/fixtures/styled_html_outputs/svelte.html @@ -1,168 +1,550 @@ -<script lang="ts" module> - export const HELLO = 'world'; -</script> - -<script lang="ts"> - // @ts-expect-error - import Thing from '$lib/Thing.svelte'; - import type {Snippet} from 'svelte'; - - const { - thing, - bound = $bindable(true), - children, - }: { - thing: Record<string, any>; - bound?: boolean; - children: Snippet; - } = $props(); - - const thing_keys = $derived(Object.keys(thing)); - - const a = 1; - - const b = 'b'; - - let c: boolean = $state(true); - - export type Some_Type = 1 | 'b' | true; - - class D { - d1: string = 'd'; - d2: number; - d3 = $state(false); - - constructor(d2: number) { - this.d2 = d2; +<script + lang="ts" + module> + export const + HELLO = + 'world'; + </script> + +<script + lang="ts"> + // @ts-expect-error + import Thing from + '$lib/Thing.svelte'; + import type + {Snippet} + from 'svelte'; + + const { thing, + bound = $bindable(true), children, + }: + { thing: Record<string, + any>; bound?: boolean; children: + Snippet; } + = $props(); + + const thing_keys = + $derived(Object.keys(thing)); + + const a = + 1; + + const b = + 'b'; + + let c: + boolean = + $state(true); + + export type + Some_Type = + 1 | + 'b' | + true; + + class + D + { d1: + string = + 'd'; d2: + number; d3 + = $state(false); + + constructor(d2: + number) + { this.d2 = d2; } - class_method(): string { - return `Hello, ${this.d1}`; + class_method(): + string { + return + `Hello, ${this.d1}`; } - instance_method = () => { - /* ... */ - this.#private_method(); - // foo + instance_method + = () => + { + /* ... */ + this.#private_method(); + // foo }; - #private_method() { - throw new Error(`${this.d1} etc`); + #private_method() { + throw new + Error(`${this.d1} etc`); } - protected protected_method() { - console.log(new Date(123)); // eslint-disable-line no-console + protected protected_method() + { console.log(new + Date(123)); + // eslint-disable-line no-console + } } - } - - // comment - - /* - other comment - - const comment = false; - */ - - /** - * JSDoc comment - */ - - export interface Some_E { - name: string; - age: number; - } - export const some_e: Some_E = {name: 'A. H.', age: 100}; + // comment - export function add(x: number, y: number): number { - return x + y; - } + /* other comment const comment = false; */ - export const plus = (a: any, b: any): any => a + b; -</script> + /** * JSDoc comment */ -<h1>hello {HELLO}!</h1> + export interface + Some_E { name: + string; age: + number; + } -{#each thing_keys as key (key)} - {@const value = thing[key]} - {value} -{/each} + export const some_e: + Some_E = {name: + 'A. H.', age: + 100}; + + export function + add(x: + number, y: + number): number + { return x + + y; + } -{#if c} - <Thing string_prop="a" number_prop={1} /> -{:else} - <Thing string_prop="b" number_prop={2} onthing={() => (c = !c)}> - {@render children()} - </Thing> -{/if} + export const plus + = (a: + any, b: + any): any + => a + b; + </script> + +<h1>hello +{HELLO}!</h1> + +{#each + thing_keys as + key (key)} +{@const value + = thing[key]} +{value} +{/each} + +{#if c} +<Thing + string_prop="a" + number_prop={1} + /> +{:else} +<Thing + string_prop="b" + number_prop={2} + onthing={() => + (c = + !c)}> +{@render + children()} +</Thing> +{/if} <!DOCTYPE html> -<div class="test special" id="unique_id"> - <p>hello world!</p> -</div> - -<p class="some_class hypen-class"> - some <span class="a b c">text</span> -</p> - -<button type="button" disabled> click me </button> +<div + class="test + special" + id="unique_id"> +<p>hello world!</p> +</div> + +<p + class="some_class + hypen-class"> +some +<span + class="a b c">text</span> +</p> + +<button + type="button" + disabled> +click me +</button> <!-- comment <div>a<br /> b</div> --> -{a} -{b} -{bound} -{D} - -<br /> - -<hr /> - -<img src="image.jpg" alt="access" /> - -<ul> - <li>list item 1</li> - <li>list item 2</li> -</ul> - -<style> - .some_class { - color: red; - } - - .hypen-class { - font-size: 16px; - } - - p { - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - } +{a} +{b} +{bound} +{D} + +<br + /> + +<hr + /> + +<img + src="image.jpg" + alt="access" + /> + +<ul> +<li>list item 1</li> +<li>list item 2</li> +</ul> + +<style> + .some_class { + color: red; + } - /* comment */ + .hypen-class { + font-size: 16px; + } - /* - multi - line + p { + box-shadow: 0 0 10px + rgba(0, + 0, 0, 0.1); + } - <comment> + /* comment */ - */ + /* multi line <comment> */ - #unique_id { - background-color: blue; - } + #unique_id { + background-color: blue; + } - div > p { - margin: 10px; - } + div > p { + margin: 10px; + } - @media (max-width: 600px) { - :global(body) { - background-color: lightblue; + @media (max-width: 600px) + { :global(body) + { background-color: lightblue; + } } - } - .special::before { - content: '< & >'; - } -</style> + .special::before { + content: + '< & >'; + } + </style> diff --git a/src/fixtures/styled_html_outputs/ts.html b/src/fixtures/styled_html_outputs/ts.html index 64c932cd..adc93d71 100644 --- a/src/fixtures/styled_html_outputs/ts.html +++ b/src/fixtures/styled_html_outputs/ts.html @@ -1,62 +1,168 @@ -const a = 1; - -const b = 'b'; - -const c = true; - -export type Some_Type = 1 | 'b' | true; - -class D { - d1: string = 'd'; - d2: number; - d3 = $state(false); - - constructor(d2: number) { - this.d2 = d2; - } - - class_method(): string { - return `Hello, ${this.d1}`; - } +const a = +1; + +const b = +'b'; + +const c = +true; + +export type +Some_Type = +1 | +'b' | +true; + +class +D +{ d1: +string = +'d'; d2: +number; d3 += $state(false); + +constructor(d2: +number) +{ this.d2 = d2; +} - instance_method = (): void => { - /* ... */ - this.#private_method(); - // foo - }; +class_method(): +string { +return +`Hello, ${this.d1}`; +} - #private_method() { - throw new Error(`${this.d1} etc`); - } +instance_method = (): +void => +{ +/* ... */ +this.#private_method(); +// foo +}; + +#private_method() { +throw new +Error(`${this.d1} etc`); +} - protected protected_method(): void { - console.log(new Date()); // eslint-disable-line no-console - } +protected protected_method(): void +{ console.log(new +Date()); +// eslint-disable-line no-console +} } -export {a, b, c, D}; +export {a, +b, c, +D}; // comment -/* -other comment - -const comment = false; -*/ +/* other comment const comment = false; */ -/** - * JSDoc comment - */ +/** * JSDoc comment */ -export interface Some_E { - name: string; - age: number; +export interface +Some_E { name: +string; age: +number; } -export const some_e: Some_E = {name: 'A. H.', age: 100}; - -export function add(x: number, y: number): number { - return x + y; +export const some_e: +Some_E = {name: +'A. H.', age: +100}; + +export function +add(x: +number, y: +number): number +{ return x ++ y; } -export const plus = (a: any, b: any): any => a + b; +export const plus += (a: +any, b: +any): any +=> a + b; From d997c0a8d7ec448f55af6e14f41b5ee09c663ddf Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:37:00 -0400 Subject: [PATCH 010/125] wip --- src/fixtures/styled_html_outputs/css.html | 51 +- src/fixtures/styled_html_outputs/html.html | 155 +---- src/fixtures/styled_html_outputs/json.html | 24 +- src/fixtures/styled_html_outputs/svelte.html | 660 ++++--------------- src/fixtures/styled_html_outputs/ts.html | 202 ++---- 5 files changed, 231 insertions(+), 861 deletions(-) diff --git a/src/fixtures/styled_html_outputs/css.html b/src/fixtures/styled_html_outputs/css.html index 63c1c5bf..5b78d4f5 100644 --- a/src/fixtures/styled_html_outputs/css.html +++ b/src/fixtures/styled_html_outputs/css.html @@ -1,54 +1,35 @@ .some_class { -color: red; + color: red; } .hypen-class { -font-size: 16px; + font-size: 16px; } p { -box-shadow: 0 0 10px -rgba(0, -0, 0, 0.1); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } /* comment */ -/* multi line <comment> */ +/* +multi +line + +<comment> + +*/ #unique_id { -background-color: blue; + background-color: blue; } div > p { -margin: 10px; + margin: 10px; } -@media (max-width: 600px) -{ body -{ background-color: lightblue; -} +@media (max-width: 600px) { + body { + background-color: lightblue; + } } diff --git a/src/fixtures/styled_html_outputs/html.html b/src/fixtures/styled_html_outputs/html.html index cd8883d0..88abbef1 100644 --- a/src/fixtures/styled_html_outputs/html.html +++ b/src/fixtures/styled_html_outputs/html.html @@ -1,149 +1,34 @@ <!doctype html> -<div - class="test"> -<p>hello world!</p> -</div> +<div class="test"> + <p>hello world!</p> +</div> -<p - class="some_class hypen-class">some -<span - class="a b - c">text</span></p> +<p class="some_class hypen-class">some <span class="a b c">text</span></p> -<button - type="button" - disabled>click me</button> +<button type="button" disabled>click me</button> <!-- comment <div>a<br /> b</div> --> -<br - /> +<br /> -<hr - /> +<hr /> -<img - src="image.jpg" - alt="access" - /> +<img src="image.jpg" alt="access" /> -<ul> -<li>list item 1</li> -<li>list item 2</li> -</ul> +<ul> + <li>list item 1</li> + <li>list item 2</li> +</ul> -<script - type="text/javascript"> - const ok = - 'yes'; - </script> +<script type="text/javascript"> + const ok = 'yes'; +</script> -<style - type="text/css"> - .special::before { - content: - '< & >'; - } - </style> +<style type="text/css"> + .special::before { + content: '< & >'; + } +</style> <![CDATA[ if (a < 0) alert("b"); <not-a-tag> ]]> diff --git a/src/fixtures/styled_html_outputs/json.html b/src/fixtures/styled_html_outputs/json.html index 755dca76..1d12ae4e 100644 --- a/src/fixtures/styled_html_outputs/json.html +++ b/src/fixtures/styled_html_outputs/json.html @@ -1,17 +1,9 @@ -{ "string": "a string", "number": 12345, "boolean": true, "null": null, "object": { -"array": -[1, "b", false] -} +{ + "string": "a string", + "number": 12345, + "boolean": true, + "null": null, + "object": { + "array": [1, "b", false] + } } diff --git a/src/fixtures/styled_html_outputs/svelte.html b/src/fixtures/styled_html_outputs/svelte.html index 5562ef1e..578070c8 100644 --- a/src/fixtures/styled_html_outputs/svelte.html +++ b/src/fixtures/styled_html_outputs/svelte.html @@ -1,550 +1,168 @@ -<script - lang="ts" - module> - export const - HELLO = - 'world'; - </script> - -<script - lang="ts"> - // @ts-expect-error - import Thing from - '$lib/Thing.svelte'; - import type - {Snippet} - from 'svelte'; - - const { thing, - bound = $bindable(true), children, - }: - { thing: Record<string, - any>; bound?: boolean; children: - Snippet; } - = $props(); - - const thing_keys = - $derived(Object.keys(thing)); - - const a = - 1; - - const b = - 'b'; - - let c: - boolean = - $state(true); - - export type - Some_Type = - 1 | - 'b' | - true; - - class - D - { d1: - string = - 'd'; d2: - number; d3 - = $state(false); - - constructor(d2: - number) - { this.d2 = d2; +<script lang="ts" module> + export const HELLO = 'world'; +</script> + +<script lang="ts"> + // @ts-expect-error + import Thing from '$lib/Thing.svelte'; + import type {Snippet} from 'svelte'; + + const { + thing, + bound = $bindable(true), + children, + }: { + thing: Record<string, any>; + bound?: boolean; + children: Snippet; + } = $props(); + + const thing_keys = $derived(Object.keys(thing)); + + const a = 1; + + const b = 'b'; + + let c: boolean = $state(true); + + export type Some_Type = 1 | 'b' | true; + + class D { + d1: string = 'd'; + d2: number; + d3 = $state(false); + + constructor(d2: number) { + this.d2 = d2; } - class_method(): - string { - return - `Hello, ${this.d1}`; + class_method(): string { + return `Hello, ${this.d1}`; } - instance_method - = () => - { - /* ... */ - this.#private_method(); - // foo + instance_method = () => { + /* ... */ + this.#private_method(); + // foo }; - #private_method() { - throw new - Error(`${this.d1} etc`); + #private_method() { + throw new Error(`${this.d1} etc`); } - protected protected_method() - { console.log(new - Date(123)); - // eslint-disable-line no-console - } + protected protected_method() { + console.log(new Date(123)); // eslint-disable-line no-console } + } - // comment + // comment - /* other comment const comment = false; */ + /* + other comment - /** * JSDoc comment */ + const comment = false; + */ - export interface - Some_E { name: - string; age: - number; - } + /** + * JSDoc comment + */ - export const some_e: - Some_E = {name: - 'A. H.', age: - 100}; - - export function - add(x: - number, y: - number): number - { return x - + y; - } + export interface Some_E { + name: string; + age: number; + } + + export const some_e: Some_E = {name: 'A. H.', age: 100}; + + export function add(x: number, y: number): number { + return x + y; + } + + export const plus = (a: any, b: any): any => a + b; +</script> + +<h1>hello {HELLO}!</h1> + +{#each thing_keys as key (key)} + {@const value = thing[key]} + {value} +{/each} - export const plus - = (a: - any, b: - any): any - => a + b; - </script> - -<h1>hello -{HELLO}!</h1> - -{#each - thing_keys as - key (key)} -{@const value - = thing[key]} -{value} -{/each} - -{#if c} -<Thing - string_prop="a" - number_prop={1} - /> -{:else} -<Thing - string_prop="b" - number_prop={2} - onthing={() => - (c = - !c)}> -{@render - children()} -</Thing> -{/if} +{#if c} + <Thing string_prop="a" number_prop={1} /> +{:else} + <Thing string_prop="b" number_prop={2} onthing={() => (c = !c)}> + {@render children()} + </Thing> +{/if} <!DOCTYPE html> -<div - class="test - special" - id="unique_id"> -<p>hello world!</p> -</div> - -<p - class="some_class - hypen-class"> -some -<span - class="a b c">text</span> -</p> - -<button - type="button" - disabled> -click me -</button> +<div class="test special" id="unique_id"> + <p>hello world!</p> +</div> + +<p class="some_class hypen-class"> + some <span class="a b c">text</span> +</p> + +<button type="button" disabled> click me </button> <!-- comment <div>a<br /> b</div> --> -{a} -{b} -{bound} -{D} - -<br - /> - -<hr - /> - -<img - src="image.jpg" - alt="access" - /> - -<ul> -<li>list item 1</li> -<li>list item 2</li> -</ul> - -<style> - .some_class { - color: red; - } +{a} +{b} +{bound} +{D} - .hypen-class { - font-size: 16px; - } +<br /> - p { - box-shadow: 0 0 10px - rgba(0, - 0, 0, 0.1); - } +<hr /> - /* comment */ +<img src="image.jpg" alt="access" /> - /* multi line <comment> */ +<ul> + <li>list item 1</li> + <li>list item 2</li> +</ul> - #unique_id { - background-color: blue; - } +<style> + .some_class { + color: red; + } - div > p { - margin: 10px; - } + .hypen-class { + font-size: 16px; + } - @media (max-width: 600px) - { :global(body) - { background-color: lightblue; - } - } + p { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + /* comment */ + + /* + multi + line + + <comment> - .special::before { - content: - '< & >'; + */ + + #unique_id { + background-color: blue; + } + + div > p { + margin: 10px; + } + + @media (max-width: 600px) { + :global(body) { + background-color: lightblue; } - </style> + } + + .special::before { + content: '< & >'; + } +</style> diff --git a/src/fixtures/styled_html_outputs/ts.html b/src/fixtures/styled_html_outputs/ts.html index adc93d71..64c932cd 100644 --- a/src/fixtures/styled_html_outputs/ts.html +++ b/src/fixtures/styled_html_outputs/ts.html @@ -1,168 +1,62 @@ -const a = -1; - -const b = -'b'; - -const c = -true; - -export type -Some_Type = -1 | -'b' | -true; - -class -D -{ d1: -string = -'d'; d2: -number; d3 -= $state(false); - -constructor(d2: -number) -{ this.d2 = d2; -} +const a = 1; -class_method(): -string { -return -`Hello, ${this.d1}`; -} +const b = 'b'; -instance_method = (): -void => -{ -/* ... */ -this.#private_method(); -// foo -}; - -#private_method() { -throw new -Error(`${this.d1} etc`); -} +const c = true; -protected protected_method(): void -{ console.log(new -Date()); -// eslint-disable-line no-console -} +export type Some_Type = 1 | 'b' | true; + +class D { + d1: string = 'd'; + d2: number; + d3 = $state(false); + + constructor(d2: number) { + this.d2 = d2; + } + + class_method(): string { + return `Hello, ${this.d1}`; + } + + instance_method = (): void => { + /* ... */ + this.#private_method(); + // foo + }; + + #private_method() { + throw new Error(`${this.d1} etc`); + } + + protected protected_method(): void { + console.log(new Date()); // eslint-disable-line no-console + } } -export {a, -b, c, -D}; +export {a, b, c, D}; // comment -/* other comment const comment = false; */ +/* +other comment + +const comment = false; +*/ -/** * JSDoc comment */ +/** + * JSDoc comment + */ -export interface -Some_E { name: -string; age: -number; +export interface Some_E { + name: string; + age: number; } -export const some_e: -Some_E = {name: -'A. H.', age: -100}; - -export function -add(x: -number, y: -number): number -{ return x -+ y; +export const some_e: Some_E = {name: 'A. H.', age: 100}; + +export function add(x: number, y: number): number { + return x + y; } -export const plus -= (a: -any, b: -any): any -=> a + b; +export const plus = (a: any, b: any): any => a + b; From 553f4d57fa9992fe01faf5970de3a39ec452ad5e Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:39:13 -0400 Subject: [PATCH 011/125] wip --- {src/fixtures => fixtures}/css_custom_highlight_api.md | 0 {src/fixtures => fixtures}/custom_highlight_api.md | 0 {src/fixtures => fixtures}/highlight.md | 0 .../fixtures => fixtures}/styled_html_outputs/css.html | 0 .../styled_html_outputs/html.html | 0 .../styled_html_outputs/json.html | 0 .../styled_html_outputs/svelte.html | 0 {src/fixtures => fixtures}/styled_html_outputs/ts.html | 0 src/lib/domstyler.test.ts | 10 +++++----- src/update_tests.task.ts | 2 +- 10 files changed, 6 insertions(+), 6 deletions(-) rename {src/fixtures => fixtures}/css_custom_highlight_api.md (100%) rename {src/fixtures => fixtures}/custom_highlight_api.md (100%) rename {src/fixtures => fixtures}/highlight.md (100%) rename {src/fixtures => fixtures}/styled_html_outputs/css.html (100%) rename {src/fixtures => fixtures}/styled_html_outputs/html.html (100%) rename {src/fixtures => fixtures}/styled_html_outputs/json.html (100%) rename {src/fixtures => fixtures}/styled_html_outputs/svelte.html (100%) rename {src/fixtures => fixtures}/styled_html_outputs/ts.html (100%) diff --git a/src/fixtures/css_custom_highlight_api.md b/fixtures/css_custom_highlight_api.md similarity index 100% rename from src/fixtures/css_custom_highlight_api.md rename to fixtures/css_custom_highlight_api.md diff --git a/src/fixtures/custom_highlight_api.md b/fixtures/custom_highlight_api.md similarity index 100% rename from src/fixtures/custom_highlight_api.md rename to fixtures/custom_highlight_api.md diff --git a/src/fixtures/highlight.md b/fixtures/highlight.md similarity index 100% rename from src/fixtures/highlight.md rename to fixtures/highlight.md diff --git a/src/fixtures/styled_html_outputs/css.html b/fixtures/styled_html_outputs/css.html similarity index 100% rename from src/fixtures/styled_html_outputs/css.html rename to fixtures/styled_html_outputs/css.html diff --git a/src/fixtures/styled_html_outputs/html.html b/fixtures/styled_html_outputs/html.html similarity index 100% rename from src/fixtures/styled_html_outputs/html.html rename to fixtures/styled_html_outputs/html.html diff --git a/src/fixtures/styled_html_outputs/json.html b/fixtures/styled_html_outputs/json.html similarity index 100% rename from src/fixtures/styled_html_outputs/json.html rename to fixtures/styled_html_outputs/json.html diff --git a/src/fixtures/styled_html_outputs/svelte.html b/fixtures/styled_html_outputs/svelte.html similarity index 100% rename from src/fixtures/styled_html_outputs/svelte.html rename to fixtures/styled_html_outputs/svelte.html diff --git a/src/fixtures/styled_html_outputs/ts.html b/fixtures/styled_html_outputs/ts.html similarity index 100% rename from src/fixtures/styled_html_outputs/ts.html rename to fixtures/styled_html_outputs/ts.html diff --git a/src/lib/domstyler.test.ts b/src/lib/domstyler.test.ts index a8dc5134..7de5e3dc 100644 --- a/src/lib/domstyler.test.ts +++ b/src/lib/domstyler.test.ts @@ -3,11 +3,11 @@ import {test, assert} from 'vitest'; import {domstyler_global} from '$lib/domstyler_global.js'; import {samples} from '$lib/samples/all.js'; -import expected_html from '../fixtures/styled_html_outputs/html.html?raw'; -import expected_css from '../fixtures/styled_html_outputs/css.html?raw'; -import expected_ts from '../fixtures/styled_html_outputs/ts.html?raw'; -import expected_svelte from '../fixtures/styled_html_outputs/svelte.html?raw'; -import expected_json from '../fixtures/styled_html_outputs/json.html?raw'; +import expected_html from '../../fixtures/styled_html_outputs/html.html?raw'; +import expected_css from '../../fixtures/styled_html_outputs/css.html?raw'; +import expected_ts from '../../fixtures/styled_html_outputs/ts.html?raw'; +import expected_svelte from '../../fixtures/styled_html_outputs/svelte.html?raw'; +import expected_json from '../../fixtures/styled_html_outputs/json.html?raw'; function test_highlighting(lang: string, input: string, expected: string) { const actual = domstyler_global.stylize(input, lang); diff --git a/src/update_tests.task.ts b/src/update_tests.task.ts index d51f95c3..db85e4cf 100644 --- a/src/update_tests.task.ts +++ b/src/update_tests.task.ts @@ -11,7 +11,7 @@ export const task: Task = { run: () => { for (const [lang, content] of Object.entries(samples)) { const styled = domstyler_global.stylize(content, lang); - const fixture_path = `./src/fixtures/styled_html_outputs/${lang}.html`; + const fixture_path = `./fixtures/styled_html_outputs/${lang}.html`; writeFileSync(fixture_path, styled); console.log(`updated fixture: ${fixture_path}`); // eslint-disable-line no-console } From 3aaf75a99df14311d119d147cafb68da8720c953 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:39:32 -0400 Subject: [PATCH 012/125] wip --- src/routes/moss.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/moss.css b/src/routes/moss.css index b6d7509f..60a99a5b 100644 --- a/src/routes/moss.css +++ b/src/routes/moss.css @@ -2,9 +2,9 @@ /* * * File statistics: - * - Total files in filer: 258 - * - External dependencies: 197 - * - Internal project files: 61 + * - Total files in filer: 255 + * - External dependencies: 202 + * - Internal project files: 53 * - Files processed (passed filter): 230 * - Files with CSS classes: 24 * - Unique classes found: 41 From 2b460cb0ec3762d5be326251bde4abfa63e4bb86 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:40:31 -0400 Subject: [PATCH 013/125] wip --- src/lib/Domstyler_Code.svelte | 22 ++++++++++------------ src/lib/Rangestyler_Code.svelte | 16 +++++++--------- src/routes/+layout.svelte | 8 ++++---- src/routes/Tome_Link.svelte | 9 +++++---- 4 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/lib/Domstyler_Code.svelte b/src/lib/Domstyler_Code.svelte index ef813d84..7bc347fa 100644 --- a/src/lib/Domstyler_Code.svelte +++ b/src/lib/Domstyler_Code.svelte @@ -6,17 +6,6 @@ // TODO do syntax styling at compile-time in the normal case, and don't import these at runtime - interface Props { - content: string; - pre_attrs?: any; - code_attrs?: any; - lang?: string | null; - grammar?: Grammar | undefined; - inline?: boolean; - domstyler?: Domstyler; - children?: Snippet<[markup: string]>; - } - const { content, pre_attrs, @@ -26,7 +15,16 @@ inline = false, domstyler = domstyler_global, children, - }: Props = $props(); + }: { + content: string; + pre_attrs?: any; + code_attrs?: any; + lang?: string | null; + grammar?: Grammar | undefined; + inline?: boolean; + domstyler?: Domstyler; + children?: Snippet<[markup: string]>; + } = $props(); // TODO do this at compile time somehow const styled = $derived( diff --git a/src/lib/Rangestyler_Code.svelte b/src/lib/Rangestyler_Code.svelte index 4f0adf13..8e091e6f 100644 --- a/src/lib/Rangestyler_Code.svelte +++ b/src/lib/Rangestyler_Code.svelte @@ -2,21 +2,19 @@ import {rangestyler_global} from './rangestyler_global.js'; import type {Rangestyler} from './rangestyler.js'; - interface Props { - content: string; - lang?: string; - pre_attrs?: any; - code_attrs?: any; - rangestyler?: Rangestyler; - } - const { content, lang = 'ts', pre_attrs, code_attrs, rangestyler = rangestyler_global, - }: Props = $props(); + }: { + content: string; + lang?: string; + pre_attrs?: any; + code_attrs?: any; + rangestyler?: Rangestyler; + } = $props(); // Element reference let code_element: HTMLElement | undefined = $state(); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 016af1d5..084f2c57 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -8,11 +8,11 @@ import Themed from '@ryanatkn/fuz/Themed.svelte'; import type {Snippet} from 'svelte'; - interface Props { + const { + children, + }: { children: Snippet; - } - - const {children}: Props = $props(); + } = $props(); diff --git a/src/routes/Tome_Link.svelte b/src/routes/Tome_Link.svelte index 7134a5bb..18290977 100644 --- a/src/routes/Tome_Link.svelte +++ b/src/routes/Tome_Link.svelte @@ -1,10 +1,11 @@ From 11622668ded758c6c28ce491f19b2df1dffda973 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:43:24 -0400 Subject: [PATCH 014/125] wip --- src/routes/rangestyler/+page.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/rangestyler/+page.svelte b/src/routes/rangestyler/+page.svelte index 708ed8c4..99c5dee6 100644 --- a/src/routes/rangestyler/+page.svelte +++ b/src/routes/rangestyler/+page.svelte @@ -11,8 +11,9 @@

Rangestyler

- The Rangestyler is a fork of Prism - by Lea Verou. + The Rangestyler uses the CSS custom highlight API (MDN).

From f6a295f0ba24a391ad5759ae1cae6be7b8040bc8 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:45:22 -0400 Subject: [PATCH 015/125] wip --- src/routes/rangestyler/+page.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/routes/rangestyler/+page.svelte b/src/routes/rangestyler/+page.svelte index 99c5dee6..44d377e3 100644 --- a/src/routes/rangestyler/+page.svelte +++ b/src/routes/rangestyler/+page.svelte @@ -13,7 +13,9 @@

The Rangestyler uses the CSS custom highlight API (MDN). + >). Instead of generating DOM elements like spans, it uses + Range + and Highlight.

From 42d4636b6c06e860a959a971be1170e9a34570cf Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:45:39 -0400 Subject: [PATCH 016/125] wip --- src/routes/rangestyler/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/rangestyler/+page.svelte b/src/routes/rangestyler/+page.svelte index 44d377e3..bc69db01 100644 --- a/src/routes/rangestyler/+page.svelte +++ b/src/routes/rangestyler/+page.svelte @@ -13,7 +13,7 @@

The Rangestyler uses the CSS custom highlight API (MDN). Instead of generating DOM elements like spans, it uses + >). Instead of generating DOM elements like spans to style text, it uses Range and Highlight.

From a9c31878208cc1e20854b9d3ad57abea9cc7da81 Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 17:46:13 -0400 Subject: [PATCH 017/125] wip --- src/routes/rangestyler/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/rangestyler/+page.svelte b/src/routes/rangestyler/+page.svelte index bc69db01..e4db44d7 100644 --- a/src/routes/rangestyler/+page.svelte +++ b/src/routes/rangestyler/+page.svelte @@ -13,7 +13,7 @@

The Rangestyler uses the CSS custom highlight API (MDN). Instead of generating DOM elements like spans to style text, it uses + >). Rather than using DOM elements like spans to style text, it uses Range and Highlight.

From f5a948a74f35d49dc1cd5b9b1af29f441b488ddb Mon Sep 17 00:00:00 2001 From: Ryan Atkinson Date: Sat, 13 Sep 2025 22:21:59 -0400 Subject: [PATCH 018/125] wip --- TODO_HIGHLIGHT.md | 25 -- src/generated/all_diagnostics.json | 385 ++++++++++++++++++ src/generated/comparison.md | 16 + src/generated/css/boundaries.json | 9 + src/generated/css/diagnostics_css.gen.ts | 25 ++ src/generated/css/matches.json | 48 +++ src/generated/css/report.md | 49 +++ src/generated/html/boundaries.json | 40 ++ src/generated/html/diagnostics_html.gen.ts | 25 ++ src/generated/html/matches.json | 50 +++ src/generated/html/report.md | 65 +++ src/generated/json/boundaries.json | 9 + src/generated/json/diagnostics_json.gen.ts | 25 ++ src/generated/json/matches.json | 31 ++ src/generated/json/report.md | 50 +++ src/generated/rangestyler_diagnostics.gen.ts | 30 ++ src/generated/rangestyler_helpers.ts | 211 ++++++++++ src/generated/svelte/boundaries.json | 42 ++ .../svelte/diagnostics_svelte.gen.ts | 25 ++ src/generated/svelte/matches.json | 72 ++++ src/generated/svelte/report.md | 76 ++++ src/generated/ts/boundaries.json | 9 + src/generated/ts/diagnostics_ts.gen.ts | 25 ++ src/generated/ts/matches.json | 39 ++ src/generated/ts/report.md | 58 +++ src/lib/Rangestyler_Code.svelte | 9 +- src/lib/benchmark.ts | 4 +- src/lib/code_samples.ts | 2 +- src/lib/rangestyler.test.ts | 373 +++++++++++++++++ src/lib/rangestyler.ts | 58 ++- src/lib/rangestyler_builder.ts | 275 ++++++++++++- src/lib/rangestyler_lang_css.ts | 2 +- src/lib/rangestyler_lang_html.ts | 14 +- src/lib/rangestyler_lang_json.ts | 2 +- src/lib/rangestyler_lang_svelte.ts | 72 ++-- src/lib/rangestyler_lang_ts.ts | 2 +- src/lib/rangestyler_types.ts | 9 + src/lib/run_benchmark.ts | 2 +- src/routes/compare/+page.svelte | 25 +- src/routes/moss.css | 13 +- src/routes/package.ts | 6 + src/update_tests.task.ts | 4 +- 42 files changed, 2211 insertions(+), 100 deletions(-) create mode 100644 src/generated/all_diagnostics.json create mode 100644 src/generated/comparison.md create mode 100644 src/generated/css/boundaries.json create mode 100644 src/generated/css/diagnostics_css.gen.ts create mode 100644 src/generated/css/matches.json create mode 100644 src/generated/css/report.md create mode 100644 src/generated/html/boundaries.json create mode 100644 src/generated/html/diagnostics_html.gen.ts create mode 100644 src/generated/html/matches.json create mode 100644 src/generated/html/report.md create mode 100644 src/generated/json/boundaries.json create mode 100644 src/generated/json/diagnostics_json.gen.ts create mode 100644 src/generated/json/matches.json create mode 100644 src/generated/json/report.md create mode 100644 src/generated/rangestyler_diagnostics.gen.ts create mode 100644 src/generated/rangestyler_helpers.ts create mode 100644 src/generated/svelte/boundaries.json create mode 100644 src/generated/svelte/diagnostics_svelte.gen.ts create mode 100644 src/generated/svelte/matches.json create mode 100644 src/generated/svelte/report.md create mode 100644 src/generated/ts/boundaries.json create mode 100644 src/generated/ts/diagnostics_ts.gen.ts create mode 100644 src/generated/ts/matches.json create mode 100644 src/generated/ts/report.md create mode 100644 src/lib/rangestyler.test.ts diff --git a/TODO_HIGHLIGHT.md b/TODO_HIGHLIGHT.md index da5614ee..be9e649e 100644 --- a/TODO_HIGHLIGHT.md +++ b/TODO_HIGHLIGHT.md @@ -1,30 +1,5 @@ # CSS Custom Highlight API Implementation -## CSS Theme - -```css -::highlight(ts_comment) { - color: var(--text_color_5); -} -::highlight(ts_keyword) { - color: var(--color_f_5); -} -::highlight(ts_string) { - color: var(--color_b_5); -} -/* ... per language, per token type */ -``` - -## Design Decisions - -1. **Snake_case naming** - Consistent with codebase -2. **No aliases** - Only exact language IDs ('ts', not 'typescript') -3. **Direct platform APIs** - No abstraction layers -4. **Pattern-based** - Simple regex patterns, no grammar inheritance -5. **Global instance** - Pre-registered languages in highlight_styler_global - ---- - ## Future Work (Phases 2-4) ### Phase 2: Auto-Optimization diff --git a/src/generated/all_diagnostics.json b/src/generated/all_diagnostics.json new file mode 100644 index 00000000..69dc5d1f --- /dev/null +++ b/src/generated/all_diagnostics.json @@ -0,0 +1,385 @@ +{ + "css": { + "boundaries": [ + { + "type": "content", + "start": 0, + "end": 301, + "length": 301, + "text_snippet": ".some_class {\\n\\tcolor: red;\\n}\\n\\n.hypen-class {\\n\\tfont..." + } + ], + "matches": { + "total": 61, + "by_type": { + "selector": 6, + "punctuation": 34, + "property": 7, + "number": 10, + "function": 1, + "comment": 2, + "atrule": 1 + }, + "samples": [ + {"pattern_name": "selector", "text": ".some_class ", "start": 0, "end": 12, "priority": 70}, + {"pattern_name": "punctuation", "text": "{", "start": 12, "end": 13, "priority": 10}, + {"pattern_name": "property", "text": "\tcolor", "start": 14, "end": 20, "priority": 60}, + {"pattern_name": "punctuation", "text": ":", "start": 20, "end": 21, "priority": 10}, + {"pattern_name": "punctuation", "text": ";", "start": 25, "end": 26, "priority": 10}, + { + "pattern_name": "selector", + "text": "}\n\n.hypen-class ", + "start": 27, + "end": 43, + "priority": 70 + }, + {"pattern_name": "property", "text": "\tfont-size", "start": 45, "end": 55, "priority": 60}, + {"pattern_name": "number", "text": "16px", "start": 57, "end": 61, "priority": 45}, + {"pattern_name": "selector", "text": "}\n\np ", "start": 63, "end": 68, "priority": 70}, + { + "pattern_name": "property", + "text": "\tbox-shadow", + "start": 70, + "end": 81, + "priority": 60 + }, + {"pattern_name": "number", "text": "0", "start": 83, "end": 84, "priority": 45}, + {"pattern_name": "number", "text": "0", "start": 85, "end": 86, "priority": 45}, + {"pattern_name": "function", "text": "rgba", "start": 92, "end": 96, "priority": 50}, + { + "pattern_name": "comment", + "text": "/* comment */", + "start": 115, + "end": 128, + "priority": 100 + }, + { + "pattern_name": "comment", + "text": "/*\nmulti\nline\n\n\n\n*/", + "start": 130, + "end": 158, + "priority": 100 + }, + { + "pattern_name": "atrule", + "text": "@media (max-width: 600px)", + "start": 229, + "end": 254, + "priority": 80 + } + ] + } + }, + "html": { + "boundaries": [ + { + "type": "content", + "start": 0, + "end": 191, + "length": 191, + "text_snippet": "\\n\\n
\\n\\t

hello worl..." + }, + { + "type": "content", + "start": 228, + "end": 340, + "length": 112, + "text_snippet": "\\n\\n
\\n\\n

\\n\\n\"access..."';\\n\\t}\\n" + }, + { + "type": "content", + "start": 477, + "end": 528, + "length": 51, + "text_snippet": "\\n\\n ]]>..." + } + ], + "matches": { + "total": 117, + "by_type": { + "doctype": 1, + "tag": 22, + "punctuation": 65, + "attr_name": 7, + "attr_value": 7, + "operator": 8, + "keyword": 1, + "string": 2, + "selector": 1, + "property": 2, + "cdata": 1 + }, + "samples": [ + { + "pattern_name": "doctype", + "text": "", + "start": 0, + "end": 15, + "priority": 90 + }, + {"pattern_name": "tag", "text": "", "start": 14, "end": 15, "priority": 10}, + {"pattern_name": "tag", "text": "hello {HELLO}!\\n\\n{#each thing_keys as ke..." + }, + { + "type": "content", + "start": 1804, + "end": 1936, + "length": 132, + "text_snippet": "\\n{a}\\n{b}\\n{bound}\\n{D}\\n\\n
\\n\\n
\\n\\n { + const lang = 'css'; + const diagnostics = await process_language_sample(lang); + + const files: Array = [ + { + filename: 'boundaries.json', + content: JSON.stringify(diagnostics.boundaries), + }, + { + filename: 'matches.json', + content: JSON.stringify(diagnostics.matches), + }, + { + filename: 'report.md', + content: generate_language_report(lang, diagnostics), + }, + ]; + + return files; +}; diff --git a/src/generated/css/matches.json b/src/generated/css/matches.json new file mode 100644 index 00000000..478675bf --- /dev/null +++ b/src/generated/css/matches.json @@ -0,0 +1,48 @@ +{ + "total": 61, + "by_type": { + "selector": 6, + "punctuation": 34, + "property": 7, + "number": 10, + "function": 1, + "comment": 2, + "atrule": 1 + }, + "samples": [ + {"pattern_name": "selector", "text": ".some_class ", "start": 0, "end": 12, "priority": 70}, + {"pattern_name": "punctuation", "text": "{", "start": 12, "end": 13, "priority": 10}, + {"pattern_name": "property", "text": "\tcolor", "start": 14, "end": 20, "priority": 60}, + {"pattern_name": "punctuation", "text": ":", "start": 20, "end": 21, "priority": 10}, + {"pattern_name": "punctuation", "text": ";", "start": 25, "end": 26, "priority": 10}, + { + "pattern_name": "selector", + "text": "}\n\n.hypen-class ", + "start": 27, + "end": 43, + "priority": 70 + }, + {"pattern_name": "property", "text": "\tfont-size", "start": 45, "end": 55, "priority": 60}, + {"pattern_name": "number", "text": "16px", "start": 57, "end": 61, "priority": 45}, + {"pattern_name": "selector", "text": "}\n\np ", "start": 63, "end": 68, "priority": 70}, + {"pattern_name": "property", "text": "\tbox-shadow", "start": 70, "end": 81, "priority": 60}, + {"pattern_name": "number", "text": "0", "start": 83, "end": 84, "priority": 45}, + {"pattern_name": "number", "text": "0", "start": 85, "end": 86, "priority": 45}, + {"pattern_name": "function", "text": "rgba", "start": 92, "end": 96, "priority": 50}, + {"pattern_name": "comment", "text": "/* comment */", "start": 115, "end": 128, "priority": 100}, + { + "pattern_name": "comment", + "text": "/*\nmulti\nline\n\n\n\n*/", + "start": 130, + "end": 158, + "priority": 100 + }, + { + "pattern_name": "atrule", + "text": "@media (max-width: 600px)", + "start": 229, + "end": 254, + "priority": 80 + } + ] +} diff --git a/src/generated/css/report.md b/src/generated/css/report.md new file mode 100644 index 00000000..91b94d5d --- /dev/null +++ b/src/generated/css/report.md @@ -0,0 +1,49 @@ +# CSS Diagnostics + +## Boundaries Detected + +| Type | Start | End | Length | Language | Snippet | +| ------- | ----- | --- | ------ | -------- | ------------------------------------------ | +| content | 0 | 301 | 301 | - | `.some_class {\n\tcolor: red;\n}\n\n.hype` | + +## Match Statistics + +**Total matches:** 61 + +### Distribution by Pattern Type + +| Pattern Type | Count | Percentage | +| ------------ | ----- | ---------- | +| punctuation | 34 | 55.7% | +| number | 10 | 16.4% | +| property | 7 | 11.5% | +| selector | 6 | 9.8% | +| comment | 2 | 3.3% | +| function | 1 | 1.6% | +| atrule | 1 | 1.6% | + +## Sample Matches + +| Pattern | Text | Position | Priority | +| ----------- | ------------------------------------ | -------- | -------- | +| selector | `.some_class ` | 0-12 | 70 | +| punctuation | `{` | 12-13 | 10 | +| property | `\tcolor` | 14-20 | 60 | +| punctuation | `:` | 20-21 | 10 | +| punctuation | `;` | 25-26 | 10 | +| selector | `}\n\n.hypen-class ` | 27-43 | 70 | +| property | `\tfont-size` | 45-55 | 60 | +| number | `16px` | 57-61 | 45 | +| selector | `}\n\np ` | 63-68 | 70 | +| property | `\tbox-shadow` | 70-81 | 60 | +| number | `0` | 83-84 | 45 | +| number | `0` | 85-86 | 45 | +| function | `rgba` | 92-96 | 50 | +| comment | `/* comment */` | 115-128 | 100 | +| comment | `/*\nmulti\nline\n\n\n\n*/` | 130-158 | 100 | +| atrule | `@media (max-width: 600px)` | 229-254 | 80 | + +## Summary + +- 📊 Pattern types: 7 +- 🎯 Total matches: 61 diff --git a/src/generated/html/boundaries.json b/src/generated/html/boundaries.json new file mode 100644 index 00000000..ace7d5f3 --- /dev/null +++ b/src/generated/html/boundaries.json @@ -0,0 +1,40 @@ +[ + { + "type": "content", + "start": 0, + "end": 191, + "length": 191, + "text_snippet": "\\n\\n
\\n\\t

hello worl..." + }, + { + "type": "content", + "start": 228, + "end": 340, + "length": 112, + "text_snippet": "\\n\\n
\\n\\n

\\n\\n\"access..."';\\n\\t}\\n" + }, + { + "type": "content", + "start": 477, + "end": 528, + "length": 51, + "text_snippet": "\\n\\n ]]>..." + } +] diff --git a/src/generated/html/diagnostics_html.gen.ts b/src/generated/html/diagnostics_html.gen.ts new file mode 100644 index 00000000..e61921a3 --- /dev/null +++ b/src/generated/html/diagnostics_html.gen.ts @@ -0,0 +1,25 @@ +import type {Gen} from '@ryanatkn/gro'; +import type {Raw_Gen_File} from '@ryanatkn/gro/gen.js'; +import {process_language_sample, generate_language_report} from '../rangestyler_helpers.js'; + +export const gen: Gen = async () => { + const lang = 'html'; + const diagnostics = await process_language_sample(lang); + + const files: Array = [ + { + filename: 'boundaries.json', + content: JSON.stringify(diagnostics.boundaries), + }, + { + filename: 'matches.json', + content: JSON.stringify(diagnostics.matches), + }, + { + filename: 'report.md', + content: generate_language_report(lang, diagnostics), + }, + ]; + + return files; +}; diff --git a/src/generated/html/matches.json b/src/generated/html/matches.json new file mode 100644 index 00000000..da44593d --- /dev/null +++ b/src/generated/html/matches.json @@ -0,0 +1,50 @@ +{ + "total": 117, + "by_type": { + "doctype": 1, + "tag": 22, + "punctuation": 65, + "attr_name": 7, + "attr_value": 7, + "operator": 8, + "keyword": 1, + "string": 2, + "selector": 1, + "property": 2, + "cdata": 1 + }, + "samples": [ + {"pattern_name": "doctype", "text": "", "start": 0, "end": 15, "priority": 90}, + {"pattern_name": "tag", "text": "", "start": 14, "end": 15, "priority": 10}, + {"pattern_name": "tag", "text": "\n\n
\n\` | +| content | 228 | 340 | 112 | - | `\n\n
\n\n
\n\n` | 0-15 | 90 | +| tag | `` | 14-15 | 10 | +| tag | ` { + const lang = 'json'; + const diagnostics = await process_language_sample(lang); + + const files: Array = [ + { + filename: 'boundaries.json', + content: JSON.stringify(diagnostics.boundaries), + }, + { + filename: 'matches.json', + content: JSON.stringify(diagnostics.matches), + }, + { + filename: 'report.md', + content: generate_language_report(lang, diagnostics), + }, + ]; + + return files; +}; diff --git a/src/generated/json/matches.json b/src/generated/json/matches.json new file mode 100644 index 00000000..30e17523 --- /dev/null +++ b/src/generated/json/matches.json @@ -0,0 +1,31 @@ +{ + "total": 32, + "by_type": { + "punctuation": 12, + "property": 6, + "string": 2, + "operator": 6, + "number": 2, + "boolean": 2, + "null": 2 + }, + "samples": [ + {"pattern_name": "punctuation", "text": "{", "start": 0, "end": 1, "priority": 20}, + {"pattern_name": "property", "text": "\"string\"", "start": 3, "end": 11, "priority": 90}, + {"pattern_name": "string", "text": "\": \"", "start": 10, "end": 14, "priority": 85}, + {"pattern_name": "operator", "text": ":", "start": 11, "end": 12, "priority": 10}, + {"pattern_name": "punctuation", "text": ",", "start": 23, "end": 24, "priority": 20}, + {"pattern_name": "property", "text": "\"number\"", "start": 26, "end": 34, "priority": 90}, + {"pattern_name": "operator", "text": ":", "start": 34, "end": 35, "priority": 10}, + {"pattern_name": "number", "text": "12345", "start": 36, "end": 41, "priority": 50}, + {"pattern_name": "punctuation", "text": ",", "start": 41, "end": 42, "priority": 20}, + {"pattern_name": "property", "text": "\"boolean\"", "start": 44, "end": 53, "priority": 90}, + {"pattern_name": "operator", "text": ":", "start": 53, "end": 54, "priority": 10}, + {"pattern_name": "boolean", "text": "true", "start": 55, "end": 59, "priority": 45}, + {"pattern_name": "null", "text": "null", "start": 63, "end": 67, "priority": 40}, + {"pattern_name": "null", "text": "null", "start": 70, "end": 74, "priority": 40}, + {"pattern_name": "string", "text": "\": [1, \"", "start": 97, "end": 105, "priority": 85}, + {"pattern_name": "number", "text": "1", "start": 101, "end": 102, "priority": 50}, + {"pattern_name": "boolean", "text": "false", "start": 109, "end": 114, "priority": 45} + ] +} diff --git a/src/generated/json/report.md b/src/generated/json/report.md new file mode 100644 index 00000000..a07808c3 --- /dev/null +++ b/src/generated/json/report.md @@ -0,0 +1,50 @@ +# JSON Diagnostics + +## Boundaries Detected + +| Type | Start | End | Length | Language | Snippet | +| ------- | ----- | --- | ------ | -------- | ------------------------------------------ | +| content | 0 | 121 | 121 | - | `{\n\t"string": "a string",\n\t"number": ` | + +## Match Statistics + +**Total matches:** 32 + +### Distribution by Pattern Type + +| Pattern Type | Count | Percentage | +| ------------ | ----- | ---------- | +| punctuation | 12 | 37.5% | +| property | 6 | 18.8% | +| operator | 6 | 18.8% | +| string | 2 | 6.3% | +| number | 2 | 6.3% | +| boolean | 2 | 6.3% | +| null | 2 | 6.3% | + +## Sample Matches + +| Pattern | Text | Position | Priority | +| ----------- | ----------- | -------- | -------- | +| punctuation | `{` | 0-1 | 20 | +| property | `"string"` | 3-11 | 90 | +| string | `": "` | 10-14 | 85 | +| operator | `:` | 11-12 | 10 | +| punctuation | `,` | 23-24 | 20 | +| property | `"number"` | 26-34 | 90 | +| operator | `:` | 34-35 | 10 | +| number | `12345` | 36-41 | 50 | +| punctuation | `,` | 41-42 | 20 | +| property | `"boolean"` | 44-53 | 90 | +| operator | `:` | 53-54 | 10 | +| boolean | `true` | 55-59 | 45 | +| null | `null` | 63-67 | 40 | +| null | `null` | 70-74 | 40 | +| string | `": [1, "` | 97-105 | 85 | +| number | `1` | 101-102 | 50 | +| boolean | `false` | 109-114 | 45 | + +## Summary + +- 📊 Pattern types: 7 +- 🎯 Total matches: 32 diff --git a/src/generated/rangestyler_diagnostics.gen.ts b/src/generated/rangestyler_diagnostics.gen.ts new file mode 100644 index 00000000..348a9853 --- /dev/null +++ b/src/generated/rangestyler_diagnostics.gen.ts @@ -0,0 +1,30 @@ +import type {Gen} from '@ryanatkn/gro'; +import type {Raw_Gen_File} from '@ryanatkn/gro/gen.js'; +import {process_language_sample, generate_comparison_report} from './rangestyler_helpers.js'; + +export const gen: Gen = async () => { + // Process all languages + const languages = ['css', 'html', 'json', 'ts', 'svelte']; + const all_diagnostics: Record = {}; + + for (const lang of languages) { + all_diagnostics[lang] = await process_language_sample(lang); + } + + // Generate comparison report + const comparison = generate_comparison_report(all_diagnostics); + + // Return array of files + const files: Array = [ + { + filename: 'comparison.md', + content: comparison, + }, + { + filename: 'all_diagnostics.json', + content: JSON.stringify(all_diagnostics), + }, + ]; + + return files; +}; diff --git a/src/generated/rangestyler_helpers.ts b/src/generated/rangestyler_helpers.ts new file mode 100644 index 00000000..5d3d226d --- /dev/null +++ b/src/generated/rangestyler_helpers.ts @@ -0,0 +1,211 @@ +import {detect_boundaries, find_matches_with_boundaries} from '$lib/rangestyler_builder.js'; +import {rangestyler_global} from '$lib/rangestyler_global.js'; +import {samples} from '$lib/samples/all.js'; + +export interface Boundary_Info { + type: string; + start: number; + end: number; + language?: string; + text_snippet: string; + length: number; +} + +export interface Match_Info { + pattern_name: string; + text: string; + start: number; + end: number; + priority: number; +} + +export interface Match_Statistics { + total: number; + by_type: Record; + samples: Array; +} + +export interface Language_Diagnostics { + boundaries: Array; + matches: Match_Statistics; +} + +// Process a language sample and return diagnostics +export const process_language_sample = async (lang: string): Promise => { + const content = samples[lang as keyof typeof samples]; + if (!content) { + throw new Error(`No sample found for language: ${lang}`); + } + + // Detect boundaries + const boundaries = detect_boundaries(content); + const boundary_infos: Array = boundaries.map((b) => ({ + type: b.type, + start: b.start, + end: b.end, + language: b.language, + length: b.end - b.start, + text_snippet: format_snippet( + content.slice(b.start, Math.min(b.end, b.start + 50)), + b.end - b.start > 50, + ), + })); + + // Get patterns and find matches + const patterns = rangestyler_global.get_language(lang)?.patterns || []; + const matches = find_matches_with_boundaries( + content, + patterns, + lang, + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Process match statistics + const matches_by_type: Record = {}; + const match_samples: Array = []; + const samples_per_type = 3; + const max_total_samples = 20; + + for (const match of matches) { + const pattern_name = match.pattern.name; + matches_by_type[pattern_name] = (matches_by_type[pattern_name] || 0) + 1; + + // Collect samples of each type + if ( + match_samples.filter((m) => m.pattern_name === pattern_name).length < samples_per_type && + match_samples.length < max_total_samples + ) { + match_samples.push({ + pattern_name, + text: content.slice(match.start, Math.min(match.end, match.start + 30)), + start: match.start, + end: match.end, + priority: match.pattern.priority || 0, + }); + } + } + + return { + boundaries: boundary_infos, + matches: { + total: matches.length, + by_type: matches_by_type, + samples: match_samples, + }, + }; +}; + +// Format a text snippet for display +export const format_snippet = (text: string, truncated: boolean): string => { + const formatted = text.replace(/\n/g, '\\n').replace(/\t/g, '\\t'); + return truncated ? formatted + '...' : formatted; +}; + +// Generate markdown report for a language +export const generate_language_report = ( + lang: string, + diagnostics: Language_Diagnostics, +): string => { + let md = `# ${lang.toUpperCase()} Diagnostics\n\n`; + + // Boundaries section + md += '## Boundaries Detected\n\n'; + if (diagnostics.boundaries.length > 0) { + md += '| Type | Start | End | Length | Language | Snippet |\n'; + md += '|------|-------|-----|--------|----------|----------|\n'; + for (const b of diagnostics.boundaries) { + const snippet = b.text_snippet.substring(0, 40); + const lang_col = b.language || '-'; + md += `| ${b.type} | ${b.start} | ${b.end} | ${b.length} | ${lang_col} | \`${snippet}\` |\n`; + } + } else { + md += 'No boundaries detected (entire file is content).\n'; + } + md += '\n'; + + // Match statistics + md += '## Match Statistics\n\n'; + md += `**Total matches:** ${diagnostics.matches.total}\n\n`; + + if (Object.keys(diagnostics.matches.by_type).length > 0) { + md += '### Distribution by Pattern Type\n\n'; + md += '| Pattern Type | Count | Percentage |\n'; + md += '|--------------|-------|------------|\n'; + const sorted_types = Object.entries(diagnostics.matches.by_type).sort(([, a], [, b]) => b - a); + for (const [type, count] of sorted_types) { + const percentage = ((count / diagnostics.matches.total) * 100).toFixed(1); + md += `| ${type} | ${count} | ${percentage}% |\n`; + } + } + md += '\n'; + + // Sample matches + md += '## Sample Matches\n\n'; + if (diagnostics.matches.samples.length > 0) { + md += '| Pattern | Text | Position | Priority |\n'; + md += '|---------|------|----------|----------|\n'; + for (const sample of diagnostics.matches.samples) { + const text = sample.text.replace(/\n/g, '\\n').replace(/\t/g, '\\t'); + md += `| ${sample.pattern_name} | \`${text}\` | ${sample.start}-${sample.end} | ${sample.priority} |\n`; + } + } else { + md += 'No matches found.\n'; + } + md += '\n'; + + // Summary + md += '## Summary\n\n'; + if (diagnostics.boundaries.filter((b) => b.type === 'script').length > 0) { + md += '- ✅ Script boundaries detected\n'; + } + if (diagnostics.boundaries.filter((b) => b.type === 'style').length > 0) { + md += '- ✅ Style boundaries detected\n'; + } + const embedded_langs = new Set(diagnostics.boundaries.map((b) => b.language).filter(Boolean)); + if (embedded_langs.size > 0) { + md += `- 🔧 Embedded languages: ${Array.from(embedded_langs).join(', ')}\n`; + } + md += `- 📊 Pattern types: ${Object.keys(diagnostics.matches.by_type).length}\n`; + md += `- 🎯 Total matches: ${diagnostics.matches.total}\n`; + + return md; +}; + +// Generate a comparison report between multiple languages +export const generate_comparison_report = ( + all_diagnostics: Record, +): string => { + let md = '# Rangestyler Diagnostics Comparison\n\n'; + + md += '## Overview\n\n'; + md += '| Language | Boundaries | Total Matches | Pattern Types | Has Script | Has Style |\n'; + md += '|----------|------------|---------------|---------------|------------|------------|\n'; + + for (const [lang, diag] of Object.entries(all_diagnostics)) { + const has_script = diag.boundaries.some((b) => b.type === 'script') ? '✅' : '❌'; + const has_style = diag.boundaries.some((b) => b.type === 'style') ? '✅' : '❌'; + const pattern_types = Object.keys(diag.matches.by_type).length; + md += `| ${lang.toUpperCase()} | ${diag.boundaries.length} | ${diag.matches.total} | ${pattern_types} | ${has_script} | ${has_style} |\n`; + } + + md += '\n## Key Findings\n\n'; + + // Languages with embedded content + const embedded_langs = Object.entries(all_diagnostics) + .filter(([, diag]) => diag.boundaries.some((b) => b.type === 'script' || b.type === 'style')) + .map(([lang]) => lang.toUpperCase()); + + if (embedded_langs.length > 0) { + md += `- **Languages with embedded content:** ${embedded_langs.join(', ')}\n`; + } + + // Most complex language + const by_matches = Object.entries(all_diagnostics).sort( + ([, a], [, b]) => b.matches.total - a.matches.total, + ); + if (by_matches.length > 0) { + md += `- **Most complex (by match count):** ${by_matches[0][0].toUpperCase()} with ${by_matches[0][1].matches.total} matches\n`; + } + + return md; +}; diff --git a/src/generated/svelte/boundaries.json b/src/generated/svelte/boundaries.json new file mode 100644 index 00000000..def51f83 --- /dev/null +++ b/src/generated/svelte/boundaries.json @@ -0,0 +1,42 @@ +[ + { + "type": "script", + "start": 25, + "end": 57, + "language": "ts", + "length": 32, + "text_snippet": "\\n\\texport const HELLO = 'world';\\n" + }, + {"type": "content", "start": 66, "end": 68, "length": 2, "text_snippet": "\\n\\n"}, + { + "type": "script", + "start": 86, + "end": 1268, + "language": "ts", + "length": 1182, + "text_snippet": "\\n\\t// @ts-expect-error\\n\\timport Thing from '$lib/Thi..." + }, + { + "type": "content", + "start": 1277, + "end": 1767, + "length": 490, + "text_snippet": "\\n\\n

hello {HELLO}!

\\n\\n{#each thing_keys as ke..." + }, + { + "type": "content", + "start": 1804, + "end": 1936, + "length": 132, + "text_snippet": "\\n{a}\\n{b}\\n{bound}\\n{D}\\n\\n
\\n\\n
\\n\\n { + const lang = 'svelte'; + const diagnostics = await process_language_sample(lang); + + const files: Array = [ + { + filename: 'boundaries.json', + content: JSON.stringify(diagnostics.boundaries), + }, + { + filename: 'matches.json', + content: JSON.stringify(diagnostics.matches), + }, + { + filename: 'report.md', + content: generate_language_report(lang, diagnostics), + }, + ]; + + return files; +}; diff --git a/src/generated/svelte/matches.json b/src/generated/svelte/matches.json new file mode 100644 index 00000000..5719a389 --- /dev/null +++ b/src/generated/svelte/matches.json @@ -0,0 +1,72 @@ +{ + "total": 610, + "by_type": { + "keyword": 34, + "class_name": 17, + "attr_name": 29, + "operator": 104, + "attr_value": 16, + "string": 10, + "punctuation": 251, + "comment": 9, + "svelte_expression": 34, + "function": 17, + "boolean": 5, + "tag": 27, + "type": 16, + "number": 14, + "template_expression": 2, + "regex": 1, + "svelte_block": 6, + "doctype": 1, + "selector": 7, + "property": 9, + "atrule": 1 + }, + "samples": [ + {"pattern_name": "keyword", "text": "export", "start": 27, "end": 33, "priority": 150}, + {"pattern_name": "keyword", "text": "const", "start": 34, "end": 39, "priority": 150}, + {"pattern_name": "class_name", "text": "HELLO", "start": 40, "end": 45, "priority": 130}, + {"pattern_name": "attr_name", "text": "HELLO", "start": 40, "end": 45, "priority": 55}, + {"pattern_name": "operator", "text": "=", "start": 46, "end": 47, "priority": 120}, + {"pattern_name": "attr_value", "text": "= 'world'", "start": 46, "end": 55, "priority": 70}, + {"pattern_name": "operator", "text": "=", "start": 46, "end": 47, "priority": 5}, + {"pattern_name": "string", "text": "'world'", "start": 48, "end": 55, "priority": 190}, + {"pattern_name": "punctuation", "text": ";", "start": 55, "end": 56, "priority": 110}, + { + "pattern_name": "comment", + "text": "// @ts-expect-error", + "start": 88, + "end": 107, + "priority": 200 + }, + {"pattern_name": "operator", "text": "/", "start": 88, "end": 89, "priority": 120}, + {"pattern_name": "punctuation", "text": "/", "start": 88, "end": 89, "priority": 10}, + {"pattern_name": "punctuation", "text": "/", "start": 89, "end": 90, "priority": 10}, + {"pattern_name": "keyword", "text": "import", "start": 109, "end": 115, "priority": 150}, + {"pattern_name": "class_name", "text": "Thing", "start": 116, "end": 121, "priority": 130}, + { + "pattern_name": "string", + "text": "'$lib/Thing.svelte'", + "start": 127, + "end": 146, + "priority": 190 + }, + {"pattern_name": "class_name", "text": "Thing", "start": 133, "end": 138, "priority": 130}, + { + "pattern_name": "svelte_expression", + "text": "{Snippet}", + "start": 161, + "end": 170, + "priority": 95 + }, + {"pattern_name": "string", "text": "'svelte'", "start": 176, "end": 184, "priority": 190}, + { + "pattern_name": "svelte_expression", + "text": "{\n\t\tthing,\n\t\tbound = $bindable", + "start": 194, + "end": 246, + "priority": 95 + } + ] +} diff --git a/src/generated/svelte/report.md b/src/generated/svelte/report.md new file mode 100644 index 00000000..2395b75f --- /dev/null +++ b/src/generated/svelte/report.md @@ -0,0 +1,76 @@ +# SVELTE Diagnostics + +## Boundaries Detected + +| Type | Start | End | Length | Language | Snippet | +| ------- | ----- | ---- | ------ | -------- | ------------------------------------------ | +| script | 25 | 57 | 32 | ts | `\n\texport const HELLO = 'world';\n` | +| content | 66 | 68 | 2 | - | `\n\n` | +| script | 86 | 1268 | 1182 | ts | `\n\t// @ts-expect-error\n\timport Thing ` | +| content | 1277 | 1767 | 490 | - | `\n\n

hello {HELLO}!

\n\n{#each th` | +| content | 1804 | 1936 | 132 | - | `\n{a}\n{b}\n{bound}\n{D}\n\n
\n\n { + const lang = 'ts'; + const diagnostics = await process_language_sample(lang); + + const files: Array = [ + { + filename: 'boundaries.json', + content: JSON.stringify(diagnostics.boundaries), + }, + { + filename: 'matches.json', + content: JSON.stringify(diagnostics.matches), + }, + { + filename: 'report.md', + content: generate_language_report(lang, diagnostics), + }, + ]; + + return files; +}; diff --git a/src/generated/ts/matches.json b/src/generated/ts/matches.json new file mode 100644 index 00000000..af4ac7a1 --- /dev/null +++ b/src/generated/ts/matches.json @@ -0,0 +1,39 @@ +{ + "total": 229, + "by_type": { + "keyword": 28, + "operator": 57, + "number": 3, + "punctuation": 87, + "string": 6, + "boolean": 4, + "class_name": 11, + "type": 14, + "function": 10, + "template_expression": 2, + "comment": 6, + "regex": 1 + }, + "samples": [ + {"pattern_name": "keyword", "text": "const", "start": 0, "end": 5, "priority": 50}, + {"pattern_name": "operator", "text": "=", "start": 8, "end": 9, "priority": 20}, + {"pattern_name": "number", "text": "1", "start": 10, "end": 11, "priority": 40}, + {"pattern_name": "punctuation", "text": ";", "start": 11, "end": 12, "priority": 10}, + {"pattern_name": "keyword", "text": "const", "start": 14, "end": 19, "priority": 50}, + {"pattern_name": "operator", "text": "=", "start": 22, "end": 23, "priority": 20}, + {"pattern_name": "string", "text": "'b'", "start": 24, "end": 27, "priority": 90}, + {"pattern_name": "punctuation", "text": ";", "start": 27, "end": 28, "priority": 10}, + {"pattern_name": "keyword", "text": "const", "start": 30, "end": 35, "priority": 50}, + {"pattern_name": "operator", "text": "=", "start": 38, "end": 39, "priority": 20}, + {"pattern_name": "boolean", "text": "true", "start": 40, "end": 44, "priority": 45}, + {"pattern_name": "punctuation", "text": ";", "start": 44, "end": 45, "priority": 10}, + {"pattern_name": "class_name", "text": "Some_Type", "start": 59, "end": 68, "priority": 30}, + {"pattern_name": "number", "text": "1", "start": 71, "end": 72, "priority": 40}, + {"pattern_name": "string", "text": "'b'", "start": 75, "end": 78, "priority": 90}, + {"pattern_name": "boolean", "text": "true", "start": 81, "end": 85, "priority": 45}, + {"pattern_name": "class_name", "text": "D", "start": 94, "end": 95, "priority": 30}, + {"pattern_name": "type", "text": "string", "start": 103, "end": 109, "priority": 55}, + {"pattern_name": "string", "text": "'d'", "start": 112, "end": 115, "priority": 90}, + {"pattern_name": "type", "text": "number", "start": 122, "end": 128, "priority": 55} + ] +} diff --git a/src/generated/ts/report.md b/src/generated/ts/report.md new file mode 100644 index 00000000..faa22fe2 --- /dev/null +++ b/src/generated/ts/report.md @@ -0,0 +1,58 @@ +# TS Diagnostics + +## Boundaries Detected + +| Type | Start | End | Length | Language | Snippet | +| ------- | ----- | --- | ------ | -------- | ------------------------------------------ | +| content | 0 | 854 | 854 | - | `const a = 1;\n\nconst b = 'b';\n\nconst ` | + +## Match Statistics + +**Total matches:** 229 + +### Distribution by Pattern Type + +| Pattern Type | Count | Percentage | +| ------------------- | ----- | ---------- | +| punctuation | 87 | 38.0% | +| operator | 57 | 24.9% | +| keyword | 28 | 12.2% | +| type | 14 | 6.1% | +| class_name | 11 | 4.8% | +| function | 10 | 4.4% | +| string | 6 | 2.6% | +| comment | 6 | 2.6% | +| boolean | 4 | 1.7% | +| number | 3 | 1.3% | +| template_expression | 2 | 0.9% | +| regex | 1 | 0.4% | + +## Sample Matches + +| Pattern | Text | Position | Priority | +| ----------- | ----------- | -------- | -------- | +| keyword | `const` | 0-5 | 50 | +| operator | `=` | 8-9 | 20 | +| number | `1` | 10-11 | 40 | +| punctuation | `;` | 11-12 | 10 | +| keyword | `const` | 14-19 | 50 | +| operator | `=` | 22-23 | 20 | +| string | `'b'` | 24-27 | 90 | +| punctuation | `;` | 27-28 | 10 | +| keyword | `const` | 30-35 | 50 | +| operator | `=` | 38-39 | 20 | +| boolean | `true` | 40-44 | 45 | +| punctuation | `;` | 44-45 | 10 | +| class_name | `Some_Type` | 59-68 | 30 | +| number | `1` | 71-72 | 40 | +| string | `'b'` | 75-78 | 90 | +| boolean | `true` | 81-85 | 45 | +| class_name | `D` | 94-95 | 30 | +| type | `string` | 103-109 | 55 | +| string | `'d'` | 112-115 | 90 | +| type | `number` | 122-128 | 55 | + +## Summary + +- 📊 Pattern types: 12 +- 🎯 Total matches: 229 diff --git a/src/lib/Rangestyler_Code.svelte b/src/lib/Rangestyler_Code.svelte index 8e091e6f..508c4e3a 100644 --- a/src/lib/Rangestyler_Code.svelte +++ b/src/lib/Rangestyler_Code.svelte @@ -1,6 +1,7 @@ +

text

+`; + + const boundaries = detect_boundaries(html); + + // Should have content before script, script content, and content after + const script_boundary = boundaries.find((b) => b.type === 'script'); + assert.ok(script_boundary); + assert.strictEqual(html.slice(script_boundary.start, script_boundary.end), 'const x = 1;'); + }); + + test('detects style tags', () => { + const html = ` + +

text

+`; + + const boundaries = detect_boundaries(html); + + const style_boundary = boundaries.find((b) => b.type === 'style'); + assert.ok(style_boundary); + assert.strictEqual( + html.slice(style_boundary.start, style_boundary.end), + '.red { color: red; }', + ); + }); + + test('comments prevent script/style detection', () => { + const html = ` + +

text

+`; + + const boundaries = detect_boundaries(html); + + // Should not detect script inside comment + const script_boundary = boundaries.find((b) => b.type === 'script'); + assert.strictEqual(script_boundary, undefined); + }); + + test('handles multiple script and style tags', () => { + const html = ` + + + + +`; + + const boundaries = detect_boundaries(html); + + const script_boundaries = boundaries.filter((b) => b.type === 'script'); + const style_boundaries = boundaries.filter((b) => b.type === 'style'); + + assert.strictEqual(script_boundaries.length, 2); + assert.strictEqual(style_boundaries.length, 2); + + assert.strictEqual( + html.slice(script_boundaries[0].start, script_boundaries[0].end), + 'const a = 1;', + ); + assert.strictEqual( + html.slice(script_boundaries[1].start, script_boundaries[1].end), + 'const b = 2;', + ); + }); + + test('handles empty script and style tags', () => { + const html = ` + + +`; + + const boundaries = detect_boundaries(html); + + // Should only have content boundaries for empty tags + const script_boundaries = boundaries.filter((b) => b.type === 'script'); + const style_boundaries = boundaries.filter((b) => b.type === 'style'); + + assert.strictEqual(script_boundaries.length, 0); + assert.strictEqual(style_boundaries.length, 0); + }); + + test('preserves boundary order', () => { + const html = ` + + +

text

+`; + + const boundaries = detect_boundaries(html); + + // Filter out content boundaries + const special_boundaries = boundaries.filter((b) => b.type !== 'content'); + + assert.strictEqual(special_boundaries.length, 2); + assert.strictEqual(special_boundaries[0].type, 'style'); + assert.strictEqual(special_boundaries[1].type, 'script'); + + // Verify boundaries are sorted by start position + for (let i = 1; i < boundaries.length; i++) { + assert.ok(boundaries[i].start >= boundaries[i - 1].end); + } + }); +}); + +describe('find_matches_with_boundaries', () => { + test('applies TypeScript patterns in script tags', () => { + const html = ``; + + const matches = find_matches_with_boundaries( + html, + rangestyler_global.get_language('html')?.patterns || [], + 'html', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Should have matches for TypeScript keywords and types + const keyword_matches = matches.filter((m) => m.pattern.name === 'keyword'); + const type_matches = matches.filter((m) => m.pattern.name === 'type'); + + assert.ok(keyword_matches.length > 0); + assert.ok(type_matches.length > 0); + }); + + test('applies CSS patterns in style tags', () => { + const html = ``; + + const matches = find_matches_with_boundaries( + html, + rangestyler_global.get_language('html')?.patterns || [], + 'html', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Should have matches for CSS selectors and properties + const selector_matches = matches.filter((m) => m.pattern.name === 'selector'); + const property_matches = matches.filter((m) => m.pattern.name === 'property'); + + assert.ok(selector_matches.length > 0); + assert.ok(property_matches.length > 0); + }); + + test('comments are matched but prevent nested language detection', () => { + const html = ``; + + const matches = find_matches_with_boundaries( + html, + rangestyler_global.get_language('html')?.patterns || [], + 'html', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Should have the comment match + const comment_matches = matches.filter((m) => m.pattern.name === 'comment'); + assert.strictEqual(comment_matches.length, 1); + + // Should not have any keyword matches from the fake script + const keyword_matches = matches.filter((m) => m.pattern.name === 'keyword'); + assert.strictEqual(keyword_matches.length, 0); + }); + + test('handles mixed content correctly', () => { + const html = ` + + + + + + + +

Text

+ +`; + + const matches = find_matches_with_boundaries( + html, + rangestyler_global.get_language('html')?.patterns || [], + 'html', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Should have various match types + const tag_matches = matches.filter((m) => m.pattern.name === 'tag'); + const property_matches = matches.filter((m) => m.pattern.name === 'property'); + const doctype_matches = matches.filter((m) => m.pattern.name === 'doctype'); + const function_matches = matches.filter((m) => m.pattern.name === 'function'); + + assert.ok(tag_matches.length > 0); + assert.ok(property_matches.length > 0); // From style + assert.ok(doctype_matches.length > 0); + // console.log should be matched as a function from TypeScript patterns + assert.ok(function_matches.length > 0); // From script + }); +}); + +describe('Svelte language patterns', () => { + test('highlights Svelte control blocks', () => { + const svelte = ` +{#if condition} +

True

+{:else} +

False

+{/if}`; + + const matches = find_matches_with_boundaries( + svelte, + rangestyler_global.get_language('svelte')?.patterns || [], + 'svelte', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + const svelte_blocks = matches.filter((m) => m.pattern.name === 'svelte_block'); + assert.ok(svelte_blocks.length >= 3); // #if, :else, /if + }); + + test('highlights Svelte each blocks', () => { + const svelte = ` +{#each items as item} +
  • {item.name}
    • +{/each}`; + + const matches = find_matches_with_boundaries( + svelte, + rangestyler_global.get_language('svelte')?.patterns || [], + 'svelte', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + const svelte_blocks = matches.filter((m) => m.pattern.name === 'svelte_block'); + assert.ok(svelte_blocks.length >= 2); // #each and /each + }); + + test('highlights Svelte directives', () => { + const svelte = ` +`; + + const matches = find_matches_with_boundaries( + svelte, + rangestyler_global.get_language('svelte')?.patterns || [], + 'svelte', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + const directives = matches.filter((m) => m.pattern.name === 'svelte_directive'); + assert.ok(directives.length >= 3); // on:click, bind:value, use:tooltip + }); + + test('highlights TypeScript in Svelte script tags', () => { + const svelte = ` +`; + + const matches = find_matches_with_boundaries( + svelte, + rangestyler_global.get_language('svelte')?.patterns || [], + 'svelte', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Should have TypeScript patterns applied + const type_matches = matches.filter((m) => m.pattern.name === 'type'); + const keyword_matches = matches.filter((m) => m.pattern.name === 'keyword'); + + assert.ok(type_matches.length > 0); // 'number' type + assert.ok(keyword_matches.length > 0); // 'let', 'const' + }); + + test('highlights CSS in Svelte style tags', () => { + const svelte = ` +`; + + const matches = find_matches_with_boundaries( + svelte, + rangestyler_global.get_language('svelte')?.patterns || [], + 'svelte', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + // Should have CSS patterns applied + const selector_matches = matches.filter((m) => m.pattern.name === 'selector'); + const property_matches = matches.filter((m) => m.pattern.name === 'property'); + + assert.ok(selector_matches.length > 0); + assert.ok(property_matches.length > 0); + }); +}); + +describe('Edge cases', () => { + test('handles strings with closing tags', () => { + // Note: This is a known limitation - regex-based parsing can't perfectly handle + // strings containing closing tags. A full parser would be needed for this. + const html = ` +"; +`; + + const boundaries = detect_boundaries(html); + const script_boundary = boundaries.find((b) => b.type === 'script'); + + // The regex will incorrectly match the first even though it's in a string + // This is a known limitation of regex-based parsing + assert.ok(script_boundary); + const content = html.slice(script_boundary.start, script_boundary.end); + // The content will be truncated at the string's + assert.strictEqual(content.trim(), 'const html = "'); + }); + + test('handles nested curly braces in Svelte', () => { + const svelte = `{#each items as { id, name }}{name}{/each}`; + + const matches = find_matches_with_boundaries( + svelte, + rangestyler_global.get_language('svelte')?.patterns || [], + 'svelte', + (id) => rangestyler_global.get_language(id)?.patterns, + ); + + const svelte_blocks = matches.filter((m) => m.pattern.name === 'svelte_block'); + assert.ok(svelte_blocks.length >= 2); // Should match the each block correctly + }); + + test('handles script tags with attributes', () => { + const html = ` +`; + + const boundaries = detect_boundaries(html); + const script_boundary = boundaries.find((b) => b.type === 'script'); + + assert.ok(script_boundary); + const content = html.slice(script_boundary.start, script_boundary.end); + assert.ok(content.includes('import')); + }); + + test('handles style tags with media queries', () => { + const html = ` +`; + + const boundaries = detect_boundaries(html); + const style_boundary = boundaries.find((b) => b.type === 'style'); + + assert.ok(style_boundary); + const content = html.slice(style_boundary.start, style_boundary.end); + assert.ok(content.includes('@media')); + }); +}); diff --git a/src/lib/rangestyler.ts b/src/lib/rangestyler.ts index bf2d3fe9..4ee7a0ac 100644 --- a/src/lib/rangestyler.ts +++ b/src/lib/rangestyler.ts @@ -1,10 +1,14 @@ -import type {Rangestyler_Language, Rangestyler_Pattern} from './rangestyler_types.js'; +import type { + Rangestyler_Language, + Rangestyler_Pattern, + Rangestyler_Mode, +} from '$lib/rangestyler_types.js'; import { - build_ranges, - find_matches, + build_ranges_with_boundaries, + find_matches_with_boundaries, resolve_overlaps, generate_html_fallback, -} from './rangestyler_builder.js'; +} from '$lib/rangestyler_builder.js'; /** * Check for CSS Highlights API support. @@ -35,7 +39,12 @@ export class Rangestyler { return this.languages.get(id); } - highlight(element: Element, text: string, lang_id: string): void { + highlight( + element: Element, + text: string, + lang_id: string, + mode: Rangestyler_Mode = 'auto', + ): void { const language = this.get_language(lang_id); if (!language) { console.error(`Language "${lang_id}" not found`); // eslint-disable-line no-console @@ -43,12 +52,13 @@ export class Rangestyler { return; } - // Use native highlights if available - if (this.supports_native) { + const use_ranges = mode === 'ranges' || (mode === 'auto' && this.supports_native); + + if (use_ranges && this.supports_native) { this.#highlight_with_ranges(element, text, language.patterns, lang_id); } else { - // Fall back to HTML generation - this.#highlight_with_html(element, text, language.patterns); + // Fall back to HTML generation or explicitly use HTML mode + this.#highlight_with_html(element, text, language.patterns, lang_id); } } @@ -56,19 +66,25 @@ export class Rangestyler { element: Element, text: string, patterns: Array, - prefix: string, + lang_id: string, ): void { // Clear any existing highlights for this element this.clear_highlights(element); - // Build ranges - const {ranges_by_name} = build_ranges(element, text, patterns); + // Build ranges (use boundary-aware for HTML/Svelte) + const {ranges_by_name} = build_ranges_with_boundaries( + element, + text, + patterns, + lang_id, + (id) => this.get_language(id)?.patterns, + ); // Register highlights const highlight_names: Array = []; for (const [name, ranges] of ranges_by_name) { - const highlight_name = `${prefix}_${name}`; + const highlight_name = `${lang_id}_${name}`; highlight_names.push(highlight_name); // Register with CSS highlights directly @@ -89,9 +105,19 @@ export class Rangestyler { /** * Highlight using HTML generation (fallback) */ - #highlight_with_html(element: Element, text: string, patterns: Array): void { - // Find and resolve matches - const matches = find_matches(text, patterns); + #highlight_with_html( + element: Element, + text: string, + patterns: Array, + lang_id: string, + ): void { + // Find and resolve matches (use boundary-aware matching for HTML/Svelte) + const matches = find_matches_with_boundaries( + text, + patterns, + lang_id, + (id) => this.get_language(id)?.patterns, + ); const resolved = resolve_overlaps(matches); // Generate HTML diff --git a/src/lib/rangestyler_builder.ts b/src/lib/rangestyler_builder.ts index 3f0ad287..ad79db8b 100644 --- a/src/lib/rangestyler_builder.ts +++ b/src/lib/rangestyler_builder.ts @@ -1,5 +1,9 @@ -import type {Rangestyler_Pattern, Rangestyler_Match_Result} from './rangestyler_types.js'; -import {escape_html} from './helpers.js'; +import type { + Rangestyler_Pattern, + Rangestyler_Match_Result, + Rangestyler_Language_Boundary, +} from '$lib/rangestyler_types.js'; +import {escape_html} from '$lib/helpers.js'; /** * Create a text node in an element and return it @@ -176,6 +180,31 @@ export const build_ranges = ( return {text_node, ranges_by_name}; }; +/** + * Build ranges from text and patterns with boundary awareness + */ +export const build_ranges_with_boundaries = ( + element: Element, + text: string, + patterns: Array, + lang_id: string, + get_language_patterns: (lang_id: string) => Array | undefined, +): {text_node: Text; ranges_by_name: Map>} => { + // Create text node + const text_node = create_text_node(element, text); + + // Find all matches with boundaries + const matches = find_matches_with_boundaries(text, patterns, lang_id, get_language_patterns); + + // Resolve overlaps + const resolved = resolve_overlaps(matches); + + // Create ranges + const ranges_by_name = create_ranges(text_node, resolved); + + return {text_node, ranges_by_name}; +}; + /** * Generate HTML fallback from matches (for unsupported browsers) */ @@ -231,3 +260,245 @@ export const generate_html_fallback = ( return html; }; + +/** + * Detect language boundaries in text (script, style) + * Comments and CDATA are handled by normal pattern matching + */ +export const detect_boundaries = (text: string): Array => { + const boundaries: Array = []; + const processed_regions = new Set(); + + // 1. Find HTML comments first (highest priority - they prevent script/style detection) + const comment_regex = //g; + let match: RegExpExecArray | null; + + while ((match = comment_regex.exec(text)) !== null) { + // Mark this region as processed so script/style tags inside comments are ignored + for (let i = match.index; i < match.index + match[0].length; i++) { + processed_regions.add(`${i}`); + } + } + + // 2. Find script tags (non-greedy to handle strings with inside) + const script_regex = /(]*)?>)([\s\S]*?)(<\/script>)/gi; + while ((match = script_regex.exec(text)) !== null) { + const full_match = match[0]; + const opening_tag = match[1]; + const content = match[2]; + + // Check if any part overlaps with processed regions + let overlaps = false; + for (let i = match.index; i < match.index + full_match.length; i++) { + if (processed_regions.has(`${i}`)) { + overlaps = true; + break; + } + } + + if (!overlaps && content) { + // Add boundary for the content only (not the tags) + const content_start = match.index + opening_tag.length; + boundaries.push({ + type: 'script', + start: content_start, + end: content_start + content.length, + language: 'ts', // Default to TypeScript for script tags + }); + // Mark entire script tag region as processed + for (let i = match.index; i < match.index + full_match.length; i++) { + processed_regions.add(`${i}`); + } + } + } + + // 3. Find style tags + const style_regex = /(]*)?>)([\s\S]*?)(<\/style>)/gi; + while ((match = style_regex.exec(text)) !== null) { + const full_match = match[0]; + const opening_tag = match[1]; + const content = match[2]; + + // Check if any part overlaps with processed regions + let overlaps = false; + for (let i = match.index; i < match.index + full_match.length; i++) { + if (processed_regions.has(`${i}`)) { + overlaps = true; + break; + } + } + + if (!overlaps && content) { + // Add boundary for the content only (not the tags) + const content_start = match.index + opening_tag.length; + boundaries.push({ + type: 'style', + start: content_start, + end: content_start + content.length, + language: 'css', + }); + // Mark entire style tag region as processed + for (let i = match.index; i < match.index + full_match.length; i++) { + processed_regions.add(`${i}`); + } + } + } + + // 4. Add content boundaries for remaining unprocessed regions + let last_end = 0; + const sorted_processed: Array = Array.from(processed_regions) + .map((s) => parseInt(s)) + .sort((a, b) => a - b); + + // Find contiguous processed regions + const ranges: Array<{start: number; end: number}> = []; + if (sorted_processed.length > 0) { + let range_start = sorted_processed[0]; + let range_end = sorted_processed[0]; + + for (let i = 1; i < sorted_processed.length; i++) { + if (sorted_processed[i] === range_end + 1) { + range_end = sorted_processed[i]; + } else { + ranges.push({start: range_start, end: range_end + 1}); + range_start = sorted_processed[i]; + range_end = sorted_processed[i]; + } + } + ranges.push({start: range_start, end: range_end + 1}); + } + + // Add content boundaries for gaps + for (const range of ranges) { + if (last_end < range.start) { + boundaries.push({ + type: 'content', + start: last_end, + end: range.start, + }); + } + last_end = range.end; + } + + // Add final content boundary if needed + if (last_end < text.length) { + boundaries.push({ + type: 'content', + start: last_end, + end: text.length, + }); + } + + // If no special regions found, entire text is content + if (boundaries.length === 0) { + boundaries.push({ + type: 'content', + start: 0, + end: text.length, + }); + } + + // Sort boundaries by start position + boundaries.sort((a, b) => a.start - b.start); + + return boundaries; +}; + +/** + * Get appropriate patterns for a given boundary type + */ +export const get_boundary_patterns = ( + boundary: Rangestyler_Language_Boundary, + patterns: Array, + get_language_patterns: (lang_id: string) => Array | undefined, +): Array => { + switch (boundary.type) { + case 'script': + // Merge TypeScript patterns (with boosted priority) and HTML patterns + // This allows both the script structure and content to be highlighted + const ts_patterns = get_language_patterns('ts') || []; + const boosted_ts = ts_patterns.map((p) => ({ + ...p, + priority: (p.priority || 0) + 100, // Boost priority to override HTML patterns + })); + return [...boosted_ts, ...patterns]; + case 'style': + // Merge CSS patterns (with boosted priority) and HTML patterns + // This allows both the style structure and content to be highlighted + const css_patterns = get_language_patterns('css') || []; + const boosted_css = css_patterns.map((p) => ({ + ...p, + priority: (p.priority || 0) + 100, // Boost priority to override HTML patterns + })); + return [...boosted_css, ...patterns]; + case 'content': + default: + // Use current language patterns for regular content + return patterns; + } +}; + +/** + * Find all pattern matches within boundaries + */ +export const find_matches_with_boundaries = ( + text: string, + patterns: Array, + lang: string, + get_language_patterns: (lang_id: string) => Array | undefined, +): Array => { + // Special handling for HTML and Svelte files + const needs_boundaries = lang === 'html' || lang === 'svelte'; + + if (!needs_boundaries) { + // For non-HTML/Svelte files, use regular matching + return find_matches(text, patterns); + } + + // Detect boundaries first + const boundaries = detect_boundaries(text); + const all_matches: Array = []; + + for (const boundary of boundaries) { + // Extract text for this boundary + const boundary_text = text.slice(boundary.start, boundary.end); + + // Get appropriate patterns for this boundary + const boundary_patterns = get_boundary_patterns(boundary, patterns, get_language_patterns); + + // Skip if no patterns to apply + if (boundary_patterns.length === 0) { + continue; + } + + // Find matches within boundary + const matches = find_matches(boundary_text, boundary_patterns); + + // Adjust offsets to global positions + for (const match of matches) { + match.start += boundary.start; + match.end += boundary.start; + + // Also adjust capture group positions if present + if (match.captures) { + for (const capture of match.captures) { + capture.start += boundary.start; + capture.end += boundary.start; + } + } + + all_matches.push(match); + } + } + + // Sort matches by start position, then by priority + all_matches.sort((a, b) => { + if (a.start !== b.start) { + return a.start - b.start; + } + // Higher priority wins + return (b.pattern.priority || 0) - (a.pattern.priority || 0); + }); + + return all_matches; +}; diff --git a/src/lib/rangestyler_lang_css.ts b/src/lib/rangestyler_lang_css.ts index f8e416d7..48f668bf 100644 --- a/src/lib/rangestyler_lang_css.ts +++ b/src/lib/rangestyler_lang_css.ts @@ -1,4 +1,4 @@ -import type {Rangestyler_Language} from './rangestyler_types.js'; +import type {Rangestyler_Language} from '$lib/rangestyler_types.js'; /** * CSS language definition diff --git a/src/lib/rangestyler_lang_html.ts b/src/lib/rangestyler_lang_html.ts index 38e72326..79a3dd7c 100644 --- a/src/lib/rangestyler_lang_html.ts +++ b/src/lib/rangestyler_lang_html.ts @@ -1,4 +1,4 @@ -import type {Rangestyler_Language} from './rangestyler_types.js'; +import type {Rangestyler_Language} from '$lib/rangestyler_types.js'; /** * HTML language definition @@ -6,7 +6,7 @@ import type {Rangestyler_Language} from './rangestyler_types.js'; export const html_language: Rangestyler_Language = { id: 'html', patterns: [ - // Comments + // Comments (handled by boundary detection but kept for highlighting the delimiters) { name: 'comment', match: //g, @@ -14,7 +14,7 @@ export const html_language: Rangestyler_Language = { greedy: true, }, - // CDATA sections + // CDATA sections (handled by boundary detection but kept for highlighting the delimiters) { name: 'cdata', match: //gi, @@ -38,6 +38,14 @@ export const html_language: Rangestyler_Language = { greedy: true, }, + // Script and style tags (just the tags, not content) + { + name: 'tag', + match: /<\/?(?:script|style)(?:\s+[^>]*)?>|<\/(?:script|style)>/gi, + priority: 82, + greedy: true, + }, + // Attribute values (strings in quotes) { name: 'attr_value', diff --git a/src/lib/rangestyler_lang_json.ts b/src/lib/rangestyler_lang_json.ts index 788c2774..32dc4c1c 100644 --- a/src/lib/rangestyler_lang_json.ts +++ b/src/lib/rangestyler_lang_json.ts @@ -1,4 +1,4 @@ -import type {Rangestyler_Language} from './rangestyler_types.js'; +import type {Rangestyler_Language} from '$lib/rangestyler_types.js'; /** * JSON language definition diff --git a/src/lib/rangestyler_lang_svelte.ts b/src/lib/rangestyler_lang_svelte.ts index f590c31f..11fb2762 100644 --- a/src/lib/rangestyler_lang_svelte.ts +++ b/src/lib/rangestyler_lang_svelte.ts @@ -1,4 +1,4 @@ -import type {Rangestyler_Language} from './rangestyler_types.js'; +import type {Rangestyler_Language} from '$lib/rangestyler_types.js'; /** * Svelte language definition @@ -6,51 +6,59 @@ import type {Rangestyler_Language} from './rangestyler_types.js'; export const svelte_language: Rangestyler_Language = { id: 'svelte', patterns: [ - // HTML Comments + // HTML Comments (handled by boundary detection but kept for highlighting) { name: 'comment', match: //g, - priority: 100, + priority: 110, greedy: true, }, - // Svelte blocks (#if, #each, etc.) + // Svelte each blocks (complex nested pattern from domstyler) { name: 'svelte_block', - match: /\{[#:/@](?:if|else|each|await|then|catch|html|debug|const|key)\b[^}]*\}/g, - priority: 95, + match: /\{[#/]each(?:(?:\{(?:(?:\{(?:[^{}])*\})|(?:[^{}]))*\})|(?:[^{}]))*\}/g, + priority: 105, greedy: true, }, - // TS expressions in curly braces + // Svelte control blocks (#if, :else, /if, @html, @debug, etc.) { - name: 'svelte_expression', - match: /\{(?:[^{}]|\{[^}]*\})*\}/g, - priority: 90, + name: 'svelte_block', + match: /\{[#:/@](?:if|else if|else|await|then|catch|html|debug|const|key)\b[^}]*\}/g, + priority: 100, greedy: true, }, - // Script tags + // Svelte snippet blocks { - name: 'script_tag', - match: /]*)?>[\s\S]*?<\/script>/gi, - priority: 85, + name: 'svelte_block', + match: /\{#snippet\s+\w+[^}]*\}[\s\S]*?\{\/snippet\}/g, + priority: 98, greedy: true, }, - // Style tags + // TS expressions in curly braces (simpler pattern to avoid nested complexity) { - name: 'style_tag', - match: /]*)?>[\s\S]*?<\/style>/gi, - priority: 85, + name: 'svelte_expression', + match: /\{[^{}]*\}/g, + priority: 95, + greedy: true, + }, + + // Script and style tags (just the tags themselves, content handled by boundaries) + { + name: 'tag', + match: /<\/?(?:script|style)(?:\s+[^>]*)?>|<\/(?:script|style)>/gi, + priority: 92, greedy: true, }, - // CDATA sections + // CDATA sections (handled by boundary detection) { name: 'cdata', match: //gi, - priority: 80, + priority: 90, greedy: true, }, @@ -58,23 +66,31 @@ export const svelte_language: Rangestyler_Language = { { name: 'doctype', match: /]*>/gi, - priority: 75, + priority: 85, greedy: true, }, - // Attribute values with Svelte bindings + // Prolog (XML declaration) { - name: 'attr_value', - match: /=\s*(?:"[^"]*"|'[^']*'|\{[^}]*\})/g, - priority: 70, + name: 'prolog', + match: /<\?[\s\S]+?\?>/g, + priority: 83, greedy: true, }, - // Svelte directives (on:, bind:, use:, etc.) + // Svelte directives (on:, bind:, use:, class:, style:, in:, out:, transition:, animate:, let:) { name: 'svelte_directive', - match: /\b(?:on|bind|use|class|style|in|out|transition|animate|let):[^\s>/=]+/g, - priority: 65, + match: /(?:on|bind|use|class|style|in|out|transition|animate|let):[^\s>/=]+/g, + priority: 75, + greedy: true, + }, + + // Attribute values with Svelte bindings + { + name: 'attr_value', + match: /=\s*(?:"[^"]*"|'[^']*'|\{[^}]*\})/g, + priority: 70, greedy: true, }, diff --git a/src/lib/rangestyler_lang_ts.ts b/src/lib/rangestyler_lang_ts.ts index b016cec3..c2f8c7ec 100644 --- a/src/lib/rangestyler_lang_ts.ts +++ b/src/lib/rangestyler_lang_ts.ts @@ -1,4 +1,4 @@ -import type {Rangestyler_Language} from './rangestyler_types.js'; +import type {Rangestyler_Language} from '$lib/rangestyler_types.js'; /** * TypeScript language definition diff --git a/src/lib/rangestyler_types.ts b/src/lib/rangestyler_types.ts index 0cfc3659..ed537968 100644 --- a/src/lib/rangestyler_types.ts +++ b/src/lib/rangestyler_types.ts @@ -19,3 +19,12 @@ export interface Rangestyler_Match_Result { text: string; captures?: Array<{start: number; end: number; text: string}>; } + +export interface Rangestyler_Language_Boundary { + type: 'script' | 'style' | 'content'; + start: number; + end: number; + language?: string; // 'ts', 'css', etc. +} + +export type Rangestyler_Mode = 'auto' | 'ranges' | 'html'; diff --git a/src/lib/run_benchmark.ts b/src/lib/run_benchmark.ts index 793ba930..01092237 100644 --- a/src/lib/run_benchmark.ts +++ b/src/lib/run_benchmark.ts @@ -1,5 +1,5 @@ #!/usr/bin/env node -import {run_and_print_benchmark} from './benchmark.js'; +import {run_and_print_benchmark} from '$lib/benchmark.js'; const filter = process.argv[2]; diff --git a/src/routes/compare/+page.svelte b/src/routes/compare/+page.svelte index 6cdd5b08..9006eb61 100644 --- a/src/routes/compare/+page.svelte +++ b/src/routes/compare/+page.svelte @@ -10,16 +10,23 @@
    🎨 {#each samples as sample (sample.name)} -
    -
    -

    domstyler

    - +
    +

    {sample.lang}

    +
    +
    +

    domstyler

    + +
    +
    +

    rangestyler (ranges)

    + +
    +
    +

    rangestyler (html)

    + +
    -
    -

    rangestyler

    - -
    -
    +
    {/each}