{"id":25973306,"url":"https://github.com/acryps/rewrite","last_synced_at":"2026-05-11T09:45:02.560Z","repository":{"id":278542274,"uuid":"935959375","full_name":"acryps/rewrite","owner":"acryps","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-20T10:02:45.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-20T11:22:19.731Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/acryps.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":"2025-02-20T09:53:31.000Z","updated_at":"2025-02-20T10:02:49.000Z","dependencies_parsed_at":"2025-02-20T11:34:01.873Z","dependency_job_id":null,"html_url":"https://github.com/acryps/rewrite","commit_stats":null,"previous_names":["acryps/rewrite"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Frewrite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Frewrite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Frewrite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acryps%2Frewrite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acryps","download_url":"https://codeload.github.com/acryps/rewrite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241946194,"owners_count":20046974,"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":[],"created_at":"2025-03-05T01:20:15.467Z","updated_at":"2026-05-11T09:44:57.533Z","avatar_url":"https://github.com/acryps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @acryps/rewrite JSX Rewriter\nOpinionated, library specific ([@acryps/page](https://github.com/acryps/page) and [@acryps/style](https://github.com/acryps/style)) JSX rewriter.\n\n## Introduction\nWe do something odd, we usually do not use standard HTML tags.\n\nHTML is supposed to contain a contents structure, and no styles, or anything that defines how the content should be shown.\nThey provide a lot of elements to do this, `\u003ch1\u003e` `\u003csection\u003e` - but not enough.\nMany developers resort to using the `\u003cdiv class=\"\"\u003e` element, whenever there is no matching HTML element.\nThis leads to a confusing mess of native elements and class lists.\n\nWe like to keep our HTMLs separate from our styles.\nThis allowed us to completely revamp one of our larger websites by an intern, with very little changes to the HTML.\nYou won't find a `\u003cui-button\u003e` anywhere, we only use `\u003cui-action\u003e` as this might be a big button, an inline button, a pane, a card ...\n```\n\u003cui-home\u003e\n\t\u003cui-title\u003e\n\t\tHello World!\n\t\u003c/ui-title\u003e\n\n\t\u003cui-guide\u003e\n\t\tLorem Ipsum\n\t\u003c/ui-guide\u003e\n\n\t\u003cui-actions\u003e\n\t\t\u003cui-action ui-href='/yay'\u003e\n\t\t\tYay!\n\t\t\u003c/ui-action\u003e\n\n\t\t\u003cui-action ui-href='/nay'\u003e\n\t\t\tNay!\n\t\t\u003c/ui-action\u003e\n\t\u003c/ui-actions\u003e\n\u003c/ui-home\u003e\n```\n\nThis works fine, as the `-` in a tag name denotes the elements as custom elements as defined in the [Custom Elements Specification](https://www.w3.org/TR/custom-elements/).\nWe have resorted to using `ui-` for anything, that is not purely a HTML element.\n\nSEO is not very good with this approach, just like **doing everything with `\u003cdiv\u003e` is not very good either**.\nYou might see that we prefer to write links as `\u003cui-action ui-href\u003e` and not as an `\u003ca href\u003e` tag, which does hurt both useability and SEO.\nRewrite steps in here and converts all our non-standard stuff into standard elements, to allow us to write our code without the mix-match approach and just write everything as `\u003cui-***\u003e`.\n\nOur HTML from before will be rendered as\n```\n\u003cdiv class=\"home\"\u003e\n\t\u003ch1\u003e\n\t\tHello World!\n\t\u003c/h1\u003e\n\n\t\u003cdiv class=\"guide\"\u003e\n\t\tLorem Ipsum\n\t\u003c/div\u003e\n\n\t\u003cdiv class=\"actions\"\u003e\n\t\t\u003ca href=\"/yay\"\u003e\n\t\t\tYay!\n\t\t\u003c/a\u003e\n\n\t\t\u003ca href=\"/nay\"\u003e\n\t\t\tNay!\n\t\t\u003c/a\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nIncluding the provided styles prevents default styles from being applied to elements, for example our `\u003cui-action\u003e` wont be rendered blue and underlined all of the sudden, just because it is a `\u003ca href\u003e` now.\n\n## Usage\nIn your application main, before ever creating an element (before the router).\n```\nnew Rewrite().activate();\n```\n\nIf you need to overwrite our defaults, or need granular control over what is rewritten\n```\nconst rewriter = new Rewrite();\nrewriter.defaultElement = `span`;\n\nrewriter.activateStyleReset(); // automatically appends resetting styles to \u003chead\u003es\nrewriter.activateStyleRewrite();\nrewriter.activateElementRewrite();\n```\n\nThe style resetter can be obtained by using `rewriter.compileStyleReset()`\n\n## Rules\nShown here are defaults for all types of rules.\n\nThe element to use for all elements that are not part of any of the lists above.\nA `\u003cui-test\u003e` will become `\u003cdiv class=\"test\"\u003e`\n```\nrewriter.defaultElement = 'div';\n```\n\nElements which should not be altered.\nAn `\u003cimg\u003e` will stay an `\u003cimg\u003e`\n```\nrewriter.nativeElements = ['img', 'canvas', 'body', 'textarea', 'select', 'option', 'optgroup', 'input']\n```\n\nElements which should be replaced.\nAn `\u003cui-title\u003e` will become a `\u003ch1\u003e`.\nCSS `ui-title` will become `.title`\n```\nrewriter.namedElements = {\n\t'ui-title': 'h1',\n\t'ui-name': 'h2',\n\t'ui-description': 'p',\n\t'ui-section': 'section',\n\t'ui-navigation': 'nav'\n};\n```\n\nElements where css declarations should be made for the native and named version.\nThe attribute `ui-icon` will become `:is(ui-icon, .icon)`\n```\nrewriter.doubleElements = ['ui-icon'];\n```\n\nReplaces attributes.\nIf a tag value is provided, the tag is replaced too\nA `\u003cui-test ui-href='/abc'\u003e` will be replaced with `\u003ca href=\"/abc\" class=\"test\"\u003e`\n```\nrewriter.attributeRewrites = {\n\t'ui-href': {\n\t\ttag: 'a',\n\t\tattribute: 'href',\n\t\tvalue: (value: string, component: Component) =\u003e { ... } // see source for inner workings\n\t}\n};\n```\n\nTransforms names.\nAn `ui-test` will become a `test`\n```\nrewriter.nameTransformer = (name: string) =\u003e name.replace('ui-', '');\n```\n\n## Pitfalls\nThis only works on elements created in `@acryps/page` components.\nIt will not work when using `document.createElement` or custom `static createElement` methods (commonly used in SVG bundles).\n\nStyle rewrites only work for `@acryps/style` declarations.\nAny styles applied outside, using `\u003cstyle\u003e`, `.style`, `style=` will not work.\n\nDefault styles will only be applied for elements defined in\n- defaultElement\n- namedElements\n- attributeRewrites (where a `tag` is provided)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facryps%2Frewrite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facryps%2Frewrite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facryps%2Frewrite/lists"}