inact 0.0.0 → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yuki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,114 @@
+# inact
+
+Inact is a transformation library that can directly output JSX as its HTML string.
+
+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>'
+```
+
+## 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.
+
+For example, the following code is a simple example:
+
+```javascript
+const message = 'hello world';
+const app = document.getElementById('app');
+
+app.innerHTML = `
+  <div>${message}</div>
+`;
+```
+
+In addition, we can also use functions to create page elements:
+
+```javascript
+const message = 'hello world';
+const app = document.getElementById('app');
+const element = document.createElement('div');
+const content = document.createTextNode(message);
+
+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.
+
+So... is there a possibility that we can use JSX?
+
+```jsx
+function MyComponent() {
+  const message = 'hello world';
+  return <div>{message}</div>;
+}
+```
+
+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.
+
+Not everyone has a use case for 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';
+const app = document.getElementById('app');
+
+app.innerHTML = <div>{message}</div>;
+```
+
+~~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.
+
+## 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.
+
+```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.
+
+## 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:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "inact"
+  }
+}
+```
+
+Is that it? Yes, after modifying `jsx` and `jsxImportSource`, you can directly use TSX to write your page code.
+
+```tsx
+function Paragraph(props: { content: string }): string {
+  return <div>{props.content}</div>;
+}
+
+const message: string = 'hello world';
+const app: HTMLElement = document.getElementById('app')!;
+
+app.innerHTML = <Paragraph content={message} />;
+```
+
+## 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.
+
+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 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.
+
+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.
+
+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.

package/lib/index.js

@@ -0,0 +1,85 @@
+// src/util.ts
+var voidElements = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+function isVoidElement(tag) {
+  return voidElements.includes(tag);
+}
+function camelToKebab(value) {
+  return value.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+// src/index.ts
+function serialize(children) {
+  switch (true) {
+    case typeof children === "number":
+      return String(children);
+    case !children:
+    case typeof children === "boolean":
+      return "";
+    case Array.isArray(children):
+      return children.map(serialize).join("");
+    default:
+      return String(children);
+  }
+}
+function parseAttribute(name, value) {
+  switch (true) {
+    case typeof value === "boolean":
+      value = "";
+      break;
+    case (name === "style" && value && typeof value === "object"):
+      value = Object.entries(value).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
+      break;
+    case (name === "class" && Array.isArray(value)):
+      value = value.join(" ");
+      break;
+    case (name === "class" && value && typeof value === "object"):
+      value = Object.entries(value).filter(([, v]) => v).map(([k]) => k).join(" ");
+      break;
+    default:
+      value = String(value);
+      break;
+  }
+  return `${name}="${value}"`;
+}
+function Fragment(props) {
+  return Array.isArray(props.children) ? props.children.join("") : props.children;
+}
+function h(type, props) {
+  if (typeof type === "function") {
+    return type({ ...props });
+  }
+  const { children = "", dangerouslySetInnerHTML, ...attrProps } = props;
+  const attributes = Object.entries(attrProps).map((attribute) => parseAttribute(...attribute)).join(" ");
+  const is_void = isVoidElement(type);
+  if (is_void) {
+    return attributes ? `<${type} ${attributes} />` : `<${type} />`;
+  }
+  const openingTag = attributes ? `<${type} ${attributes}>` : `<${type}>`;
+  const closingTag = `</${type}>`;
+  const textContent = dangerouslySetInnerHTML?.__html ?? serialize(children);
+  return `${openingTag}${textContent}${closingTag}`;
+}
+var jsx = h;
+var jsxs = h;
+var jsxDEV = h;
+export {
+  jsxs,
+  jsxDEV,
+  jsx,
+  Fragment
+};

package/package.json

@@ -1,12 +1,66 @@
 {
   "name": "inact",
-  "version": "0.0.0",
-  "module": "index.ts",
-  "type": "module",
+  "version": "0.0.1",
+  "description": "Transpile the JSX to HTML strings",
+  "exports": {
+    "./jsx-runtime": {
+      "types": "./types/jsx.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./types/jsx.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.js"
+    }
+  },
+  "packageManager": "bun@1.3.0",
+  "files": [
+    "lib",
+    "types"
+  ],
+  "scripts": {
+    "build": "bun ./scripts/build/index.ts",
+    "format": "prettier **/*.ts --write",
+    "lint": "eslint **/*.ts",
+    "test": "bun test",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xueelf/inact.git"
+  },
+  "keywords": [
+    "html",
+    "jsx",
+    "react"
+  ],
+  "author": "Yuki <admin@yuki.sh>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xueelf/inact/issues"
+  },
+  "homepage": "https://github.com/xueelf/inact#readme",
   "devDependencies": {
-    "@types/bun": "latest"
+    "@commitlint/cli": "latest",
+    "@commitlint/config-conventional": "latest",
+    "@eslint/js": "latest",
+    "eslint": "latest",
+    "husky": "latest",
+    "prettier": "latest",
+    "typescript-eslint": "latest"
   },
   "peerDependencies": {
-    "typescript": "^5"
+    "typescript": "latest"
+  },
+  "devEngines": {
+    "runtime": {
+      "name": "bun",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "bun",
+      "onFail": "error"
+    }
   }
 }

package/types/jsx.d.ts

@@ -0,0 +1,24 @@
+export type AttrClass = string | string[] | Record<string, boolean>;
+
+export type AttrStyle = string | Partial<CSSStyleDeclaration>;
+
+export interface DangerouslySetInnerHTML {
+  __html: string;
+}
+
+export type TagProps<T extends HTMLElement> = Partial<
+  Omit<T, 'children' | 'class' | 'style'>
+> & {
+  children?: unknown;
+  class?: AttrClass;
+  style?: AttrStyle;
+  dangerouslySetInnerHTML?: DangerouslySetInnerHTML;
+};
+
+declare global {
+  namespace JSX {
+    type IntrinsicElements = {
+      [K in keyof HTMLElementTagNameMap]: TagProps<HTMLElementTagNameMap[K]>;
+    };
+  }
+}

package/index.ts

@@ -1 +0,0 @@
-console.log("Ciallo～(∠·ω< )⌒★");