René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Lit.js migration roadmap","articleBody":"### Today:\nToday, the project consists of a set of pseudo-components fully managed in Vanilla JavaScript without any external libraries.\n\n### Goal:\nImplement [Lit.js](https://lit.dev/) to maintain a primarily Vanilla approach while structuring our components more effectively.\n\n### (Easy) components to migrate (most of the code is html element creation):\n- [x] legend component (see https://github.com/NodeSecure/cli/pull/546)\n- [x] bundlephobia component (see https://github.com/NodeSecure/cli/issues/547)\n- [x] [expandable component](https://github.com/NodeSecure/cli/blob/master/public/components/expandable/expandable.js) (see https://github.com/NodeSecure/cli/pull/551)\n- [x] [file-box component ](https://github.com/NodeSecure/cli/blob/master/public/components/file-box/file-box.js)\n- [x] [gauge component](https://github.com/NodeSecure/cli/blob/master/public/components/gauge/gauge.js)\n- [x] [report component](https://github.com/NodeSecure/cli/blob/master/public/components/views/home/report/report.js) (easy but is blocked by the migration of the popup component)\n- [x] [files component](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/files/files.js) (blocked by expandable)\n- [x] [licenses component](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/licenses/licenses.js) (easy but blocked by fill-box)\n- [x] [vulnerabilities](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/vulnerabilities/vulnerabilities.js)\n\n### (Medium) Tougher components to migrate (because of their interaction with other components)\n- [x] [popup component](https://github.com/NodeSecure/cli/blob/master/public/components/popup/popup.js)\n- [x] [locker component](https://github.com/NodeSecure/cli/blob/master/public/components/locker/locker.js)\n- [x] [scripts component](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/scripts/scripts.js)\n\n### (Hard) hard component to migrate (because of the inherent complexity of the component itself and its interaction with other components)\n- [ ] [navigation component](https://github.com/NodeSecure/cli/blob/master/public/components/navigation/navigation.js)  \n- [ ] [wiki component](https://github.com/NodeSecure/cli/blob/master/public/components/wiki/wiki.js)  \n- [ ] [settings component](https://github.com/NodeSecure/cli/blob/master/public/components/views/settings/settings.js)  \n- [ ] [search component](https://github.com/NodeSecure/cli/blob/master/public/components/views/search/search.js)  \n- [x] [maintainer component](https://github.com/NodeSecure/cli/blob/master/public/components/views/home/maintainers/maintainers.js)  \n- [ ] [package (container)](https://github.com/NodeSecure/cli/blob/master/public/components/package/package.js)  \n  - [ ] [header](https://github.com/NodeSecure/cli/blob/master/public/components/package/header/header.js)  \n  - [ ] [pannels/overview](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/overview/overview.js)  \n  - [ ] [pannels/scorecard](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/scorecard/scorecard.js)  \n  - [ ] [pannels/warnings](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/warnings/warnings.js)\n  - [ ] [code-fetcher](https://github.com/NodeSecure/cli/blob/master/public/components/package/pannels/warnings/code-fetcher.js)\n\n### (Hardest)\n- [ ] [searchbar](https://github.com/NodeSecure/cli/blob/master/public/components/views/settings/settings.js) (probably more rewrite than a migration see https://github.com/NodeSecure/cli/issues/423)\n- [ ] [home](https://github.com/NodeSecure/cli/blob/master/public/components/views/home/home.js)\n\n### (Icon migration)\nsetup a new icon system (see https://github.com/NodeSecure/cli/issues/556)\n\n\u003e [!NOTE]\n\u003e The estimated migration difficulty for each component is provided as a general indication and may prove to be easier or more complex in practice than stated \n","author":{"url":"https://github.com/clemgbld","@type":"Person","name":"clemgbld"},"datePublished":"2025-08-02T12:13:52.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/549/cli/issues/549"}