{"id":23280988,"url":"https://github.com/nicholaswmin/flomaster","last_synced_at":"2025-09-10T22:32:13.829Z","repository":{"id":264162400,"uuid":"892520910","full_name":"nicholaswmin/flomaster","owner":"nicholaswmin","description":" fast, native syntax highlighting  [wip]","archived":false,"fork":false,"pushed_at":"2024-11-27T03:16:36.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T02:47:05.564Z","etag":null,"topics":["highlight-api","parser","syntax-highlighting","tokenizer"],"latest_commit_sha":null,"homepage":"https://nicholaswmin.github.io/flomaster/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicholaswmin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-22T09:16:07.000Z","updated_at":"2024-11-28T23:01:12.000Z","dependencies_parsed_at":"2025-02-12T19:44:27.387Z","dependency_job_id":"a6f1d6ba-a8f1-46eb-a237-734029aefae0","html_url":"https://github.com/nicholaswmin/flomaster","commit_stats":null,"previous_names":["nicholaswmin/lizard","nicholaswmin/flomaster"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicholaswmin%2Fflomaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicholaswmin%2Fflomaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicholaswmin%2Fflomaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicholaswmin%2Fflomaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicholaswmin","download_url":"https://codeload.github.com/nicholaswmin/flomaster/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247489300,"owners_count":20947086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlight-api","parser","syntax-highlighting","tokenizer"],"created_at":"2024-12-19T23:39:53.469Z","updated_at":"2025-04-06T13:35:42.407Z","avatar_url":"https://github.com/nicholaswmin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flomaster\n\n[![tests](https://github.com/nicholaswmin/flomaster/actions/workflows/test.yml/badge.svg)](https://github.com/nicholaswmin/flomaster/actions/workflows/test.yml)\n\n\u003ca href=\"https://youtube.com/watch?v=JFvXvV0oZIo\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/797123a3-f70c-4128-a47c-babb2bdbfdb1\" title=\"This is 'James', a colour-camouflaging chameleon. The truth is that he's a common iguana, his real name is actually 'Alizavras' and he hails from Xylotympou, a sunny village in Cyprus. We play along because he eats the mosquitos. Courtesy of icons8.com\" width=\"72\"\u003e\n\u003c/a\u003e\n\n[sandbox][snd]\n\n## why\n\nThe current process, used by every (top 3 at least) \nsyntax highlighters:\n\n1. [Lexical tokenization][tok] of raw source code\n2. Wrapping *each* token in a DOM element \n3. CSS selection\n\nStep 2 is an awkward mechanism which triggers [layout reflow][rfl][^1] in   \nthe main thread, hence contributing to \"jank\" and [First-Meaningful Paint][fmp]   \ndelays. Additionally, it enlarges the DOM further exacerbating the issue.          \n\nThis prototype attempts an alternative method using position offsets,  \nso it (should) avoid these issues altogether.   \nSimply put: it's *faster*.    \n\n\n## todos\n\n- [x] get a non-fancy [tokenizer][tok] to iterate upon:\n    - [x] return shape: `[{ token: 'keyword', start: 5, end: 10 }]`\n    - [x] add minimal tests. \n    - [ ] the tokenizer falls over some regex,     \n          see notes in test.\n    - [ ] fix/ensure errors are correctly printable in browser\n    - [ ] many cases that need ironing-out. Fix the presets.\n    - [ ] needs precedence fixes, i.e `forEach` is colored half\n          for `for` and the rest separate.\n- [ ] start benchmarks asap, this is more than enough\n - This is perfect: https://gist.github.com/addyosmani/c053f68aead473d7585b45c9e8dce31e\n - what about other browsers\n- [ ] fix the online sandbox  \n- [x] a decent color mapper\n- [ ] add a small benchmark\n    - decide on the parameters *before* you start\n- [ ] review if it makes sense\n\n## test\n\n\u003e tests require Node `v22+`\n\n```bash\nnode --run test\n```\n\n## misc\n\nserve demo sandbox locally\n\n```bash\n$ node --run demo\n```\n\n## license\n\n\u003e MIT License  \n\u003e\n\u003e Copyright (c) 2024 Nicholas Kyriakides \n\u003e\n\u003e Permission is hereby granted, free of charge, to any person obtaining     \n\u003e a copy of this software and documentation files (the \"Software\"), to    \n\u003e deal  in the Software without restriction, including without limitation   \n\u003e the rights  to use, copy, modify, merge, publish, distribute, sublicense,   \n\u003e and/or sell  copies of the Software, and to permit persons to whom the   \n\u003e Software is furnished to do so, subject to the following conditions:     \n\u003e \n\u003e The above copyright notice and this permission notice shall be    \n\u003e included in all copies or substantial portions of the Software.      \n\n\u003c!-- Footnotes --\u003e\n\n[^1]: this is distinct from *forced synchronous layout reflow*, the reflow\n      that is triggered by accessing certain geometric APIs. Both are types\n      of reflow.\n\n   \n\u003c!-- References --\u003e\n\n[tok]: https://en.wikipedia.org/wiki/Lexical_analysis#Tokenization\n[fmp]: https://developer.mozilla.org/en-US/docs/Glossary/First_meaningful_paint\n[dom]: https://en.wikipedia.org/wiki/Document_Object_Model\n[rfl]: https://developer.mozilla.org/en-US/docs/Glossary/Reflow\n[bnk]: https://www.chromium.org/blink/\n[snd]: https://nicholaswmin.github.io/flomaster/demo.html\n[dcs]: https://nicholaswmin.github.io/flomaster\n[pdc]: https://github.com/nicholaswmin/flomaster/tree/main/.github/docs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicholaswmin%2Fflomaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicholaswmin%2Fflomaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicholaswmin%2Fflomaster/lists"}