Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: removed the renderToStringTemplateTag render function #279

Merged
merged 1 commit into from
Jan 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading