Skip to content

Commit

Permalink
feat: removed the renderToStringTemplateTag render function
Browse files Browse the repository at this point in the history
  • Loading branch information
ncpa0cpl committed Jan 3, 2024
1 parent b3862e7 commit 8c3bc06
Show file tree
Hide file tree
Showing 11 changed files with 4 additions and 525 deletions.
60 changes: 2 additions & 58 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,8 @@ A JSX based html templating engine for browsers or Node environments.
1. [Adding custom web component tags](#adding-custom-web-component-tags)
2. [Adding a global html attribute](#adding-a-global-html-attribute)
8. [Express JS View Engine](#express-js-view-engine)
9. [Rendering to a string tag template](#rendering-to-a-string-tag-template)
1. [Example](#example-2)
10. [Monkey-Patching type definitions](#monkey-patching-type-definitions)
11. [Contributing](#contributing)
9. [Monkey-Patching type definitions](#monkey-patching-type-definitions)
10. [Contributing](#contributing)

## Getting started

Expand Down Expand Up @@ -348,60 +346,6 @@ app.get("/", (_, resp) => {

For this approach to work, the JSX Components must be exported as defaults (ex. `export default () => <div></div>` or `exports.default = () => <div></div>`) and the views must be transpiled to `.js` files.

## Rendering to a string tag template

A [string tag template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) is special type of function that can be used for custom parsing of template literals.

JSXTE allows you to leverage any existing string tag templates but with a JSX syntax instead of a template literal.

### Example

```tsx
// using template literal:
import { html } from "some-library";
const props = {
/* ... */
};
const result = html`<div class="${props.className}">
<h1>${props.header}</h1>
</div>`;

// using JSXTE:
import { renderToStringTemplateTag } from "jsxte";
import { html } from "some-library";
const props = {
/* ... */
};
const result = renderToStringTemplateTag(
html,
<div class={props.className}>
<h1>{props.header}</h1>
</div>,
);
```

If the string tag template function uses non standard html attribute names (ex. `className` instead of `class` or `@click` instead of `onclick`) you can map the attribute names render by this method by specifying mapping for those:

```tsx
const result = renderToStringTemplateTag(
html,
<div>
<button
class="my-class"
onclick={handler}
>
Click Me
</button>
</div>,
{
attributeMap: {
onclick: "@click",
class: "className",
},
},
);
```

## Monkey-Patching type definitions

It is possible to monkey-patch type definition of all HTML tags and add new attributes to them.
Expand Down
2 changes: 1 addition & 1 deletion src/html-renderer/element-resolver.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mapAttributeName } from "../string-template-renderer/map-attribute-name";
import { mapAttributeName } from "../utilities/map-attribute-name";
import type { HTMLElementStruct, RendererHTMLAttributes } from "./types";

export class HTMLElementResolver {
Expand Down
7 changes: 0 additions & 7 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@ import "./utilities/array-flat-polyfill";
export * from "./express/index";
export * from "./jsx/jsx.types";

export {
Interpolate,
InterpolateTag,
} from "./string-template-renderer/interpolate";
export { DefaultTemplateArrayCache } from "./string-template-renderer/default-cache";
export { ErrorBoundary } from "./error-boundary/error-boundary";
export { defineContext } from "./component-api/component-api";
export {
Expand All @@ -18,7 +13,6 @@ export {
renderToJson,
renderToJsonAsync,
} from "./json-renderer/render-to-json";
export { renderToStringTemplateTag } from "./string-template-renderer/render-to-string-template-tag";
export { memo } from "./utilities/memo";
export { createElement } from "./jsx/jsx-runtime";
export { JsxteRenderError } from "./jsxte-render-error";
Expand All @@ -28,7 +22,6 @@ export type {
ComponentApi,
} from "./component-api/component-api";
export type { AttributeBool, HTMLProps } from "./jsx/base-html-tag-props";
export type { StringTemplateParserOptions } from "./string-template-renderer/render-to-string-template-tag";
export type { Crossorigin } from "./jsx/prop-types/shared/crossorigin";
export type { RefererPolicy } from "./jsx/prop-types/shared/referer-policy";
export type { Target } from "./jsx/prop-types/shared/target";
Expand Down
36 changes: 0 additions & 36 deletions src/string-template-renderer/default-cache.ts

This file was deleted.

93 changes: 0 additions & 93 deletions src/string-template-renderer/interpolate.ts

This file was deleted.

Loading

0 comments on commit 8c3bc06

Please sign in to comment.