{"id":17990970,"url":"https://github.com/viktor-yakubiv/rehype-web-components","last_synced_at":"2026-04-27T22:32:07.724Z","repository":{"id":101140361,"uuid":"478732865","full_name":"viktor-yakubiv/rehype-web-components","owner":"viktor-yakubiv","description":"Web components simaltion in rehype.js","archived":false,"fork":false,"pushed_at":"2023-09-29T12:59:21.000Z","size":171,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T04:13:52.754Z","etag":null,"topics":["components","custom-elements","rehype-plugin","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/viktor-yakubiv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-04-06T21:29:37.000Z","updated_at":"2022-08-04T17:01:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"9940fdd1-e277-48ff-8b6f-f59da167b530","html_url":"https://github.com/viktor-yakubiv/rehype-web-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/viktor-yakubiv/rehype-web-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-web-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-web-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-web-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-web-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viktor-yakubiv","download_url":"https://codeload.github.com/viktor-yakubiv/rehype-web-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viktor-yakubiv%2Frehype-web-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32358509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["components","custom-elements","rehype-plugin","web-components"],"created_at":"2024-10-29T19:19:47.793Z","updated_at":"2026-04-27T22:32:07.709Z","avatar_url":"https://github.com/viktor-yakubiv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![\n  Russia invaded Ukraine,\n  killing tens of thousands of civilians and displacing millions more.\n  It's a genocide.\n  Please help us defend freedom, democracy and Ukraine's right to exist.\n](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://vshymanskyy.github.io/StandWithUkraine)\n\n# rehype-web-components 🚧\n\n**[rehype][]** plugin to process replace custom elements\nwith corresponding pre-defined templates.\nSupports interpolation with attribute values,\nCSS scoping with [CSS modules][css-modules]\nand limited script evaluation to setup the component.\n\n## Contents\n\n*   [What is this?](#what-is-this)\n*   [When should I use this?](#when-should-i-use-this)\n*   [Install](#install)\n*   [Use](#use)\n*   [API](#api)\n    *   [`unified().use(rehypeComponents[, options])`](#unifieduserehypecomponents-options)\n*   [Example](#example)\n*   [Types](#types)\n*   [Compatibility](#compatibility)\n*   [Related](#related)\n*   [License](#license)\n\n## What is this?\n\nThis package is a [unified][] ([rehype][]) plugin\nthat transforms custom elements with templates\nloaded from specified directories.\nAlso, it substitutes slots according to the spec,\ninterpolates host attributes in the template\nand executes basic setup scripts prior to interpolation.\n\n**unified** is a project that transforms content\nwith abstract syntax trees (ASTs).\n**rehype** adds support for HTML to unified.\n**hast** is the HTML AST that rehype uses.\nThis is a rehype plugin that runs PostCSS on `\u003cstyle\u003e` elements\nand other elements that have a `style` attribute.\n\n## When should I use this?\n\nWhen you cannot fit your HTML development into a single file\nand want to split it up to logical components;\nwhen you still want to stick to bare HTML and its specs\nrather then going far to custom syntax of a template engine.\n\nWhen you want Svelte features like value interpolation and style scoping\nbut want to keep the project without client scripts.\n\nWhen you want web components but with semantics and no JavaScript again.\n\n## Install\n\nThis package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\nIn Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:\n\n```sh\nnpm install rehype-postcss\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport rehypeComponents from 'https://esm.sh/rehype-postcss@0.1'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import rehypeComponents from 'https://esm.sh/rehype-postcss@6?bundle'\n\u003c/script\u003e\n```\n\n## Use\n\nSay we have the following file `example.html`:\n\n```html\n\u003cmy-component\u003eHello! 👋\u003c/my-component\u003e\n```\n\nalong with `components/my-component.html`:\n\n```html\n\u003ch1\u003e\u003cslot\u003e\u003c/slot\u003e\u003c/h1\u003e\n```\n\nAnd our module `example.js` looks as follows:\n\n```js\nimport { read } from 'to-vfile'\nimport { rehype } from 'rehype'\nimport rehypeComponents from 'rehype-postcss'\n\nconst file = await rehype()\n  .data('settings', { fragment: true })\n  .use(rehypeComponents, {\n    paths: ['components'],\n  })\n  .process(await read('example.html'))\n\nconsole.log(String(file))\n```\n\nNow, running `node example.js` yields:\n\n```html\n\u003ch1\u003eHello! 👋\u003c/h1\u003e\n```\n\n## API\n\nThis package exports no identifiers.\nThe default export is `rehypeComponents`.\n\n### `unified().use(rehypeComponents[, options])`\n\nRuns (pseudo) web components processing.\n\n##### `options`\n\nConfiguration (optional).\n\n###### `options.paths`\n\n###### `options.components`\n\n## Example\n\nCheck more detailed example in the [`example`](./example) directory.\n\n## Types\n\nThis package is not typed with [TypeScript][].\nIt can be though if you send a PR or when I have some extra time.\n\n## Compatibility\n\nThe project is compatible with Node.js 18+.\n\n## License\n\n[MIT][license] © [Viktor Yakubiv][author]\n\n\u003c!-- Definitions --\u003e\n\n[npm]: https://docs.npmjs.com/cli/install\n\n[esmsh]: https://esm.sh\n\n[license]: ./LICENSE\n\n[author]: https://yakubiv.com\n\n[typescript]: https://www.typescriptlang.org\n\n[unified]: https://github.com/unifiedjs/unified\n\n[rehype]: https://github.com/rehypejs/rehype\n\n[postcss]: https://github.com/postcss/postcss\n\n[postcss-html]: https://github.com/ota-meshi/postcss-html\n\n[postcss-load-config]: https://github.com/postcss/postcss-load-config\n\n[css-modules]: https://github.com/css-modules/css-modules\n\n[postcss-deno-example]: https://github.com/postcss/postcss#deno\n\n[postcss-process]: https://postcss.org/api/#processor-process\n\n[postcss-process-options]: https://postcss.org/api/#processoptions\n\n[posthtml-postcss]: https://github.com/posthtml/posthtml-postcss\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviktor-yakubiv%2Frehype-web-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviktor-yakubiv%2Frehype-web-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviktor-yakubiv%2Frehype-web-components/lists"}