{"id":23366701,"url":"https://github.com/d8corp/innet--jsx","last_synced_at":"2025-10-10T15:37:19.605Z","repository":{"id":57118742,"uuid":"461784355","full_name":"d8corp/innet--jsx","owner":"d8corp","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-05T20:36:32.000Z","size":1382,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-13T13:02:50.989Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d8corp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-02-21T09:12:45.000Z","updated_at":"2025-06-05T20:36:34.000Z","dependencies_parsed_at":"2024-10-22T22:36:03.668Z","dependency_job_id":"39fd7cd7-7ef4-4434-b2b4-05e6916f1aef","html_url":"https://github.com/d8corp/innet--jsx","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"6358af48a01d59747ee9180dd139d3c24130d09b"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/d8corp/innet--jsx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Finnet--jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Finnet--jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Finnet--jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Finnet--jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d8corp","download_url":"https://codeload.github.com/d8corp/innet--jsx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Finnet--jsx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004568,"owners_count":26083736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T14:17:20.667Z","updated_at":"2025-10-10T15:37:19.574Z","avatar_url":"https://github.com/d8corp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.npmjs.com/package/innet\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/d8corp/innet/main/logo.svg\" align=\"left\" width=\"90\" height=\"90\" alt=\"InnetJs logo by Mikhail Lysikov\"\u003e\n\u003c/a\u003e\n\n# \u0026nbsp; @innet/jsx\n\n\u0026nbsp;\n\n[![NPM](https://img.shields.io/npm/v/@innet/jsx.svg)](https://www.npmjs.com/package/@innet/jsx)\n[![downloads](https://img.shields.io/npm/dm/@innet/jsx.svg)](https://www.npmtrends.com/@innet/jsx)\n[![changelog](https://img.shields.io/badge/Changelog-⋮-brightgreen)](https://changelogs.xyz/@innet/jsx)\n[![license](https://img.shields.io/npm/l/@innet/jsx)](https://github.com/d8corp/innet--jsx/blob/main/LICENSE)\n\n## Abstract\nJSX is one of the main features you can use with innet.\nJSX makes possible to use XML-ish syntax in JavaScript.\n\nIf you want to use JSX with [innet](https://www.npmjs.com/package/innet) you can check\n- [@innet/dom](https://www.npmjs.com/package/@innetjs/dom) to use it on client side\n- [@innet/server](https://www.npmjs.com/package/@innetjs/server) to use it on server side\n- [innetjs](https://www.npmjs.com/package/innetjs) if you want to try innet ecosystem\n- [innet-jsx](https://www.npmjs.com/package/innet-jsx) converts `jsx`/`tsx` into `js`/`ts`\n- [rollup-plugin-innet-jsx](https://www.npmjs.com/package/rollup-plugin-innet-jsx) to use it with rollup\n\nThis package contains plugins that handle jsx components.\n\n[![stars](https://img.shields.io/github/stars/d8corp/innet--jsx?style=social)](https://github.com/d8corp/innet--jsx/stargazers)\n[![watchers](https://img.shields.io/github/watchers/d8corp/innet--jsx?style=social)](https://github.com/d8corp/innet--jsx/watchers)\n\n## Install\nnpm\n```bash\nnpm i @innet/jsx\n```\nyarn\n```bash\nyarn add @innet/jsx\n```\n\n## TS Setup\n\n#### preserve\n\nSetup with [innet-jsx](https://github.com/d8corp/innet-jsx)\n\n`tsconfig.json`\n```\n{\n  \"compilerOptions\": {\n    ...\n    \"jsx\": \"preserve\"\n  },\n  ...\n}\n```\n\n#### react-jsx\n\nOr setup without [innet-jsx](https://github.com/d8corp/innet-jsx)\n\n```\n{\n  \"compilerOptions\": {\n    ...\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"@innet/jsx\"\n  },\n  ...\n}\n```\n\n#### react-jsxdev\n\nTo get more error details use `react-jsxdev`\n\n```\n{\n  \"compilerOptions\": {\n    ...\n    \"jsx\": \"react-jsxdev\",\n    \"jsxImportSource\": \"@innet/jsx\"\n  },\n  ...\n}\n```\n\n## JSX Component\nJSX Component is a function that get `props` argument\n```typescript\nfunction Test (props) {\n  console.log(props.id)\n}\n```\n\nCreate a handler to handle JSX Component\n```typescript\nimport innet, { createHandler } from 'innet'\nimport { object } from '@innet/utils'\nimport { jsxComponent } from '@innet/jsx'\n\nconst handler = createHandler([\n  object([\n    jsxComponent,\n  ]),\n])\n```\nHere we say: an object should be handled as `jsxComponent`\n\nThen we can use it as wall\n```typescript jsx\ninnet(\u003cTest id='test' /\u003e, handler)\n// 'test'\n\ninnet(\u003cTest /\u003e, handler)\n// undefined\n```\n\nIf you try to use `null`, you can get an error, because of `null` is an object. To prevent this, use `nullish`\n\n```typescript jsx\nimport innet, { createHandler } from 'innet'\nimport { object, nullish } from '@innet/utils'\nimport { jsxComponent } from '@innet/jsx'\n\nconst handler = createHandler([\n  nullish([]),\n  object([\n    jsxComponent,\n  ]),\n])\n\nfunction Test ({ children }) {\n  console.log(children)\n}\n\ninnet(\u003cTest\u003e{null}\u003c/Test\u003e, handler)\n// null\n```\n\n## JSX Plugin\n\n`jsxPlugins` is a plugin which adds default jsx elements by jsx plugins.\n\n```typescript jsx\nimport innet, { createHandler } from 'innet'\nimport { object, nullish } from '@innet/utils'\nimport { jsxPlugins, useProps } from '@innet/jsx'\n\n// JSX Plugin\nconst sum = () =\u003e {\n  const { a, b } = useProps()\n  console.log(a + b)\n}\n\nconst handler = createHandler([\n  nullish([]),\n  object([\n    jsxPlugins({\n      sum,\n    }),\n  ])\n])\n\ninnet(\u003csum a={1} b={2} /\u003e, handler)\n// 3\n```\n\n[innet-jsx](https://www.npmjs.com/package/innet-jsx) converts jsx:\n```typescript\ninnet({\n  type: 'sum',\n  props: {\n    a: 1,\n    b: 2,\n  }\n}, handler)\n```\n\n## Context\n\nUse `Context` to create a context variable.\n\n```typescript jsx\nimport { Context } from '@innet/jsx'\nconst color = new Context('blue')\n```\n\nUse `useContext` in a component to get current context value.\n\n```typescript jsx\nimport { useContext, Context } from '@innet/jsx'\n\nconst color = new Context('blue')\n\nfunction Content () {\n  const currentColor = useContext(color)\n  console.log(`color: ${currentColor}`)\n}\n```\nUse `ContextProvider` to provide values into children.\n\n```typescript jsx\nimport innet, { createHandler } from 'innet'\nimport { object, nullish, arraySync } from '@innet/utils'\nimport {\n  jsxComponent,\n  Context,\n  useProps,\n  useContext,\n  ContextProvider\n} from '@innet/jsx'\n\nconst handler = createHandler([\n  nullish([]),\n  arraySync,\n  object([jsxComponent]),\n])\n\nconst color = new Context('blue')\n\nfunction Content () {\n  const currentColor = useContext(color)\n  console.log(`color: ${currentColor}`)\n}\n\ninnet((\n  \u003c\u003e\n    \u003cContent/\u003e\n    \u003cContextProvider for={color} set='red'\u003e\n      \u003cContent/\u003e\n    \u003c/ContextProvider\u003e\n  \u003c/\u003e\n), handler)\n\n//color: blue\n//color: red\n```\n\n## Issues\nIf you find a bug or have a suggestion, please file an issue on [GitHub](https://github.com/d8corp/innet--jsx/issues).\n\n[![issues](https://img.shields.io/github/issues-raw/d8corp/innet--jsx)](https://github.com/d8corp/innet--jsx/issues)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Finnet--jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd8corp%2Finnet--jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Finnet--jsx/lists"}