104 lines
2.9 KiB
Markdown
104 lines
2.9 KiB
Markdown
|
# jsx-html
|
|||
|
|
|
|||
|
|
`jsx-html` render JSX template to HTML asynchronously. Compatible with Deno, NodeJs and can also run in browser.
|
|||
|
|
|
|||
|
|
Try with runkit: https://runkit.com/apiel/jsx-html-example
|
|||
|
|
|
|||
|
|
## NodeJs
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
yarn add async-jsx-html
|
|||
|
|
# or
|
|||
|
|
npm install async-jsx-html
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import { React } from 'async-jsx-html';
|
|||
|
|
|
|||
|
|
const View = () => <div>Hello</div>;
|
|||
|
|
// render return a Promise
|
|||
|
|
(<View />).render().then((html: string) => console.log(html));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Deno
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
/// <reference path="https://raw.githubusercontent.com/apiel/jsx-html/master/jsx.d.ts" />
|
|||
|
|
|
|||
|
|
import { React } from 'https://raw.githubusercontent.com/apiel/jsx-html/master/mod.ts';
|
|||
|
|
|
|||
|
|
const View = () => <div>Hello</div>;
|
|||
|
|
// render return a Promise
|
|||
|
|
(<View />).render().then((html: string) => console.log(html));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
deno run https://raw.githubusercontent.com/apiel/jsx-html/master/examples/00.tsx
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## TsConfig
|
|||
|
|
|
|||
|
|
As you would do with React, you need to import `React` from `jsx-html` for the transpiler. If you are not feeling confortable with using `React` as import since it is not React, you can import `jsx` from `jsx-html` but you would have to update your tsconfig file: https://github.com/denoland/deno/issues/3572
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"compilerOptions": {
|
|||
|
|
"jsx": "react",
|
|||
|
|
"jsxFactory": "jsx"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
/// <reference path="https://raw.githubusercontent.com/apiel/jsx-html/master/jsx.d.ts" />
|
|||
|
|
|
|||
|
|
import { jsx } from 'https://raw.githubusercontent.com/apiel/jsx-html/master/mod.ts';
|
|||
|
|
|
|||
|
|
const View = () => <div>Hello</div>;
|
|||
|
|
(<View />).render().then(console.log);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> **Note:** prefer using sermver tags version instead of master to avoid conflict with caching, e.g:
|
|||
|
|
> `import { jsx } from 'https://raw.githubusercontent.com/apiel/jsx-html/1.0.0/mod.ts';`.
|
|||
|
|
|
|||
|
|
## Async component
|
|||
|
|
|
|||
|
|
Unlike React, components can be asynchrone, so you can fetch for data without to handle states.
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import { React } from 'https://raw.githubusercontent.com/apiel/jsx-html/master/mod.ts';
|
|||
|
|
|
|||
|
|
const Data = async () => {
|
|||
|
|
const res = await fetch('http://example.com/some/api');
|
|||
|
|
const content = new Uint8Array(await res.arrayBuffer());
|
|||
|
|
return <div>{content}</div>;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const View = () => (
|
|||
|
|
<div>
|
|||
|
|
<Data />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
(<View />).render().then(console.log);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# InnerHTML
|
|||
|
|
|
|||
|
|
The Element property innerHTML sets the HTML or XML markup contained within the property.
|
|||
|
|
|
|||
|
|
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
/// <reference path="https://raw.githubusercontent.com/apiel/jsx-html/master/jsx.d.ts" />
|
|||
|
|
|
|||
|
|
import { jsx } from 'https://raw.githubusercontent.com/apiel/jsx-html/master/mod.ts';
|
|||
|
|
|
|||
|
|
const View = () => <div innerHTML="<b>hello</b> world" />;
|
|||
|
|
(<View />).render().then(console.log); // will output <div><b>hello</b> world</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Browser
|
|||
|
|
|
|||
|
|
`jsx-html` can also be used directly in browser. Find an example with webpack [here](https://github.com/apiel/jsx-html/tree/master/examples/browser).
|