https://github.com/acryps/rewrite

https://github.com/acryps/rewrite

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/acryps/rewrite
• Owner: acryps
• Created: 2025-02-20T09:53:31.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-20T10:02:45.000Z (over 1 year ago)
• Last Synced: 2025-02-20T11:22:19.731Z (over 1 year ago)
• Language: TypeScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# @acryps/rewrite JSX Rewriter

Opinionated, library specific ([@acryps/page](https://github.com/acryps/page) and [@acryps/style](https://github.com/acryps/style)) JSX rewriter.

## Introduction

We do something odd, we usually do not use standard HTML tags.

HTML is supposed to contain a contents structure, and no styles, or anything that defines how the content should be shown.

They provide a lot of elements to do this, `
` `` - but not enough.

Many developers resort to using the `
` element, whenever there is no matching HTML element.

This leads to a confusing mess of native elements and class lists.


We like to keep our HTMLs separate from our styles.

This allowed us to completely revamp one of our larger websites by an intern, with very little changes to the HTML.

You won't find a `` anywhere, we only use `` as this might be a big button, an inline button, a pane, a card ...

```

	

		Hello World!

	

	

		Lorem Ipsum

	

	

		

			Yay!

		

		

			Nay!

		

	

```

This 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/).

We have resorted to using `ui-` for anything, that is not purely a HTML element.

SEO is not very good with this approach, just like **doing everything with `
` is not very good either**.

You might see that we prefer to write links as `` and not as an `` tag, which does hurt both useability and SEO.

Rewrite 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 ``.


Our HTML from before will be rendered as

```



	


		Hello World!

	


	


		Lorem Ipsum

	


	


		

			Yay!

		


		

			Nay!

		

	



```


Including the provided styles prevents default styles from being applied to elements, for example our `` wont be rendered blue and underlined all of the sudden, just because it is a `` now.


## Usage

In your application main, before ever creating an element (before the router).

```

new Rewrite().activate();

```

If you need to overwrite our defaults, or need granular control over what is rewritten

```

const rewriter = new Rewrite();

rewriter.defaultElement = `span`;

rewriter.activateStyleReset(); // automatically appends resetting styles to s

rewriter.activateStyleRewrite();

rewriter.activateElementRewrite();

```

The style resetter can be obtained by using `rewriter.compileStyleReset()`

## Rules

Shown here are defaults for all types of rules.

The element to use for all elements that are not part of any of the lists above.

A `` will become `
`

```

rewriter.defaultElement = 'div';

```


Elements which should not be altered.

An `` will stay an ``

```

rewriter.nativeElements = ['img', 'canvas', 'body', 'textarea', 'select', 'option', 'optgroup', 'input']

```

Elements which should be replaced.

An `` will become a `
`.

CSS `ui-title` will become `.title`

```

rewriter.namedElements = {

	'ui-title': 'h1',

	'ui-name': 'h2',

	'ui-description': 'p',

	'ui-section': 'section',

	'ui-navigation': 'nav'

};

```


Elements where css declarations should be made for the native and named version.

The attribute `ui-icon` will become `:is(ui-icon, .icon)`

```

rewriter.doubleElements = ['ui-icon'];

```

Replaces attributes.

If a tag value is provided, the tag is replaced too

A `` will be replaced with ``

```

rewriter.attributeRewrites = {

	'ui-href': {

		tag: 'a',

		attribute: 'href',

		value: (value: string, component: Component) => { ... } // see source for inner workings

	}

};

```


Transforms names.

An `ui-test` will become a `test`

```

rewriter.nameTransformer = (name: string) => name.replace('ui-', '');

```

## Pitfalls

This only works on elements created in `@acryps/page` components.

It will not work when using `document.createElement` or custom `static createElement` methods (commonly used in SVG bundles).

Style rewrites only work for `@acryps/style` declarations.

Any styles applied outside, using ``, `.style`, `style=` will not work.

Default styles will only be applied for elements defined in

- defaultElement

- namedElements

- attributeRewrites (where a `tag` is provided)