inact 0.0.1 → 0.0.2

package/README.md

@@ -1,83 +1,85 @@
 # inact
 
-Inact is a transformation library that can directly output JSX as its HTML string.
+Inact is a transformation library that can directly output JSX as HTML strings.
 
 Read this in other languages: English | [简体中文](https://github.com/xueelf/inact/blob/master/README.zh.md)
 
-```jsx
-console.log(<div>hello world</div>); // -> '<div>hello world</div>'
+```tsx
+const Paragraph = <p>hello world</p>;
+console.log(<Paragraph />); // -> '<p>hello world</p>'
 ```
 
 ## Introduction
 
 What can this project be used for?
 
-As we all know, without using **third party libraries or frameworks**, most developers would choose to use template strings to write page elements.
+As we all know, without using **third-party libraries or frameworks**, most developers would choose template literals to write page elements.
 
-For example, the following code is a simple example:
+For example, here's the simplest code snippet:
 
 ```javascript
-const message = 'hello world';
+const content = 'hello world';
 const app = document.getElementById('app');
 
 app.innerHTML = `
-  <div>${message}</div>
+  <p>${content}</p>
 `;
 ```
 
-In addition, we can also use functions to create page elements:
+Besides that, we can also use functions to create page elements:
 
 ```javascript
-const message = 'hello world';
+const text = 'hello world';
 const app = document.getElementById('app');
-const element = document.createElement('div');
-const content = document.createTextNode(message);
+const element = document.createElement('p');
+const content = document.createTextNode(text);
 
 element.appendChild(content);
 app.insertBefore(element, null);
 ```
 
-However, compared to the former, it is too complicated. If there are many page elements involved, the code will also become less readable. Therefore, people tend to prefer using template strings.
+But compared to the former, this is way too complicated. If there are many page elements involved, the code also becomes unreadable. Therefore, people tend to prefer template literals.
+
+However, when using template literals to write HTML, the IDE won't provide tag highlighting or autocompletion, and there won't be any error prompts if you make a mistake. And when it comes to for-loop iteration in templates... if you've ever written ASP, JSP, or PHP, you know how painful this can be. ~~(IDEA: Bet you didn't expect—I actually do have tag highlighting and autocompletion for template literals.)~~
 
-So... is there a possibility that we can use JSX?
+So... is it possible that we could use JSX to solve this?
 
-```jsx
-function MyComponent() {
-  const message = 'hello world';
-  return <div>{message}</div>;
+```tsx
+function Paragraph(props: { content: string }): string {
+  return <p>{props.content}</p>;
 }
 ```
 
-Although nowadays, there are excellent projects like [React](https://react.dev/) and [Preact](https://preactjs.com/), they are too "heavy". If we just want to simply write some page structures, not many people would rely on the ecosystem of third party libraries just to use JSX.
+Although nowadays there are excellent projects like [React](https://react.dev/) and [Preact](https://preactjs.com/), they are too "heavy". If we just want to write some simple page structures, probably not many people would make their project depend on a third‑party ecosystem just to use JSX.
 
-Not everyone has a use case for virtual DOM, and not everyone wants to write `app` and `render` in their **small projects**.
+Not everyone needs a virtual DOM, and not everyone wants to write `app` and `render` in their **small projects**.
 
 So, what does Inact do?
 
-```jsx
-const message = 'hello world';
+```tsx
+const content = 'hello world';
 const app = document.getElementById('app');
 
-app.innerHTML = <div>{message}</div>;
+app.innerHTML = <p>{content}</p>;
 ```
 
 ~~Wow, amazing, only JSX can do!~~
 
-( •̀ ω •́ )✧ No complicated processing, purely outputting native HTML strings, and the rest of the logic is entirely up to you to handle.
+( •̀ ω •́ )✧ No complex processing, just purely output native HTML strings. The rest of the logic is entirely in your hands.
 
 ## Installation
 
-I recommend using Inact directly with [TypeScript](https://www.typescriptlang.org/). You can use npm or other package managers to install the relevant dependencies.
+I recommend using Inact together with [TypeScript](https://www.typescriptlang.org/). You can install the required dependencies using npm or any other package manager.
 
 ```shell
 npm install -D typescript inact
 ```
 
-Of course, if you don't want to use TypeScript for development, you can also integrate tools like [ESBuild](https://esbuild.github.io/) or [Rollup](https://rollupjs.org/). Inact is essentially a `jsx-runtime` and can be freely used in combination with these tools.
+Of course, if you don't use TypeScript for development, you can also integrate tools like [ESBuild](https://esbuild.github.io/) or [Rollup](https://rollupjs.org/). In essence, Inact is a `jsx‑runtime` and can be freely combined with other tools.
 
 ## Usage
 
-Taking TypeScript as an example, after installing the relevant dependencies, we need to execute the `tsc --init` command in the project root directory and modify the corresponding `tsconfig.json` file content:
+Taking TypeScript as an example, after installing the relevant dependencies, we first need to run `tsc --init` in the project root and then modify the generated `tsconfig.json` file:
 
 ```json
 {
@@ -92,23 +94,54 @@ Is that it? Yes, after modifying `jsx` and `jsxImportSource`, you can directly u
 
 ```tsx
 function Paragraph(props: { content: string }): string {
-  return <div>{props.content}</div>;
+  return <p>{props.content}</p>;
 }
 
-const message: string = 'hello world';
+const text: string = 'hello world';
 const app: HTMLElement = document.getElementById('app')!;
 
-app.innerHTML = <Paragraph content={message} />;
+app.innerHTML = <Paragraph content={text} />;
+```
+
+## Features
+
+#### `class`
+
+Supports arrays and objects:
+
+```tsx
+<div class={['foo', 'bar']} />
+<div class={{ foo: true, bar: false }} />
+```
+
+#### `style`
+
+Supports camel‑case objects:
+
+```tsx
+<div style={{ backgroundColor: 'red' }} />
+```
+
+### Fragment
+
+You can use `<>...</>` or `<Fragment>...</Fragment>` to group elements, so you don't need to add extra wrapper nodes in the HTML, improving code readability and maintainability.
+
+### dangerouslySetInnerHTML
+
+If you need to render raw HTML text:
+
+```tsx
+<div dangerouslySetInnerHTML={{ __html: '<span>Raw HTML</span>' }} />
 ```
 
 ## About
 
-Initially, I developed this because I needed to create a plugin for [Docsify](https://docsify.js.org/) (this is a documentation framework that converts Markdown into HTML and renders it on the page). At that time, I used template strings to handle page elements, as most docsify plugins do.
+Initially, I needed to develop a plugin for [Docsify](https://docsify.js.org/) (a documentation framework that converts Markdown to HTML and renders it), so I used template literals to handle page elements—as most docsify plugins do.
 
-However, as time went on, I felt that the code was becoming increasingly difficult to maintain and read, so I started using [vhtml](https://github.com/developit/vhtml) to refactor the plugin, this project is also the solution by Preact once recommended for pure HTML string output.
+But over time, I increasingly felt the code becoming hard to maintain and read, so I started using [vhtml](https://github.com/developit/vhtml) to refactor the plugin. That project was once recommended by Preact as a solution for pure HTML string output.
 
-But vhtml didn't fully meet my needs. For example, I wanted to pass arrays or objects to the class, which it didn't support. Additionally, vhtml only provides the h function. If you want to use it with TypeScript, you need extra configuration, define JSX types yourself, and write a `Fragment` function, which is not out-of-the-box.
+However, vhtml didn't fully meet my needs. For example, I wanted to pass arrays or objects to class, which it didn't support. Moreover, vhtml only provides the h function; if you want to use it with TypeScript, you need extra configuration, define JSX types yourself, and write a `Fragment` function, it's not out‑of‑the‑box.
 
-More importantly, in the source code of vhtml, the `arguments` keyword is used, which is not recommended and behaves inconsistently in strict mode. For example, I now prefer using bun for development, and I encountered various weird issues. It is not suitable for integration into modern code.
+More importantly, in the source code of vhtml, the `arguments` keyword is used, which is not recommended and behaves inconsistently in strict mode. For example, I now prefer using bun for development, and I encountered various weird issues. It's not suitable for integration into modern code.
 
-Of course, this is not entirely vhtml's fault. It is an excellent open source project, but it just didn't meet my needs. After almost searching the entire internet and not finding a similar solution, I developed this project.
+Of course, this isn't entirely vhtml's fault. It's a great open‑source project, just not what I needed. After almost searching the entire web and still not finding a similar solution, I built this project.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inact",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Transpile the JSX to HTML strings",
   "exports": {
     "./jsx-runtime": {