{"id":19686473,"url":"https://github.com/ianprime0509/static-jsx","last_synced_at":"2025-04-29T06:31:28.572Z","repository":{"id":36958836,"uuid":"442881270","full_name":"ianprime0509/static-jsx","owner":"ianprime0509","description":"A simple JSX runtime for static strings.","archived":false,"fork":false,"pushed_at":"2023-03-28T00:06:42.000Z","size":293,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-26T04:56:44.593Z","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/ianprime0509.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2021-12-29T20:19:43.000Z","updated_at":"2025-03-07T16:39:28.000Z","dependencies_parsed_at":"2024-11-11T18:32:56.834Z","dependency_job_id":null,"html_url":"https://github.com/ianprime0509/static-jsx","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":0.4242424242424242,"last_synced_commit":"2aa3ef461b3a22116a5147d5c1b7e12f3242f129"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianprime0509%2Fstatic-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianprime0509%2Fstatic-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianprime0509%2Fstatic-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianprime0509%2Fstatic-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ianprime0509","download_url":"https://codeload.github.com/ianprime0509/static-jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251174803,"owners_count":21547569,"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","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-11-11T18:28:46.231Z","updated_at":"2025-04-29T06:31:26.904Z","avatar_url":"https://github.com/ianprime0509.png","language":"JavaScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# static-jsx\n\nstatic-jsx is a simple, dependency-free JSX runtime which renders JSX directly\nto raw HTML strings. It is intended to be used to power a static HTML template\nengine, closer to something like [Handlebars](https://handlebarsjs.com/),\n[Nunjucks](https://mozilla.github.io/nunjucks/), etc. than\n[React](https://reactjs.org/); it is not a replacement for most use-cases of\nReact or similar libraries such as [Preact](https://preactjs.com/) and\n[Nano JSX](https://nanojsx.github.io/).\n\n## Usage\n\nThere are example projects under the `examples` directory corresponding to\nvarious ecosystems. These example projects are tested for correct functionality\nusing `npm run test:examples`, which is part of `npm test`.\n\nThe preface to this section gives a general overview of the API surface and\nsupported functionality. For more targeted guidance for particular frameworks,\nsee the subsections below.\n\nThis library supports both the \"classic\" and \"automatic\" JSX transforms:\n\n- Using the \"classic\" transform, you must manually import the `h` and `Fragment`\n  members of the main `static-jsx` module and instruct your JSX transpiler to\n  use these names for the corresponding functionality. It is usually possible to\n  do this using the following pattern:\n\n  ```jsx\n  /** @jsx h */\n  /** @jsxFrag Fragment */\n  import { Fragment, h } from \"static-jsx\";\n\n  // Your JSX code here\n  ```\n\n- Using the \"automatic\" transform, you don't need to import anything manually;\n  the appropriate runtime imports will be added automatically by your\n  transpiler. You still must instruct your transpiler to use the static-jsx\n  runtime library, however, which is available as `static-jsx/jsx-runtime`. It\n  is usually possible to do this using the following pattern:\n\n  ```jsx\n  /** @jsxImportSource static-jsx */\n\n  // Your JSX code here\n  ```\n\nJSX elements may be normal HTML elements (including\n[custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)),\nwhich are spelled with a lowercase first letter (e.g. `div`, `h1`, etc.), or\ncomponents, which are spelled with an uppercase first letter (e.g. `Fragment`,\n`SiteHeader`, etc.). Only function components are supported: the component may\naccept a single props object, containing the attributes passed to the component\n(including the special `children` prop, containing the component's children, if\nany), and must return an instance of `RawHtml` (which can be satisfied by\nreturning any JSX expression).\n\nHere is an example of how components can be used to abstract common page\nelements:\n\n```jsx\nconst Navigation = ({ navItems }) =\u003e (\n  \u003cnav\u003e\n    \u003cul\u003e\n      {navItems.map((item) =\u003e (\n        \u003cli\u003e\n          \u003ca href={item.url}\u003e{item.title}\u003c/a\u003e\n        \u003c/li\u003e\n      ))}\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n);\n\nconst PageContent = ({ children, title }) =\u003e (\n  \u003cmain\u003e\n    \u003cheading\u003e\n      \u003ch1\u003e{title}\u003c/h1\u003e\n    \u003c/heading\u003e\n\n    {children}\n  \u003c/main\u003e\n);\n\nconst Footer = () =\u003e \u003cfooter\u003eCopyright 2021 Ian Johnson\u003c/footer\u003e;\n\nconst Page = ({ children, navItems, title }) =\u003e (\n  \u003c\u003e\n    \u003cNavigation navItems={navItems} /\u003e\n    \u003cPageContent title={title}\u003e{children}\u003c/PageContent\u003e\n    \u003cFooter /\u003e\n  \u003c/\u003e\n);\n```\n\nThe return type of every JSX expression is an instance of `RawHtml`. `RawHtml`\nis simply a wrapper around a string containing raw HTML data, to distinguish it\nfrom normal strings, which are assumed to require escaping before interpolating\ninto HTML. The raw HTML can be obtained using the `html` property; in the\nopposite direction, instances of `RawHtml` can be constructed directly from\nstrings to mark them as safe for direct insertion into HTML.\n\nHere is a simple example to illustrate how JSX and `RawHtml` work:\n\n```jsx\nconst body = \"\u003cp\u003eParagraph\u003c/p\u003e\";\n\nconst element1 = \u003cdiv\u003e{body}\u003c/div\u003e;\n// element1 is an instance of RawHtml\nconsole.log(element1.html);\n// Prints \u003cdiv\u003e\u0026lt;p\u0026gt;Paragraph\u0026lt;/p\u0026gt;\u003c/div\u003e\n\nconst element2 = \u003cdiv\u003e{new RawHtml(body)}\u003c/div\u003e;\n// element2 is also an instance of RawHtml\nconsole.log(element2.html);\n// Prints \u003cdiv\u003e\u003cp\u003eParagraph\u003c/p\u003e\u003c/div\u003e\n```\n\nWhen using static-jsx to produce a complete HTML page, `RawHtml` is also useful\nfor adding the doctype, which is not supported by JSX natively:\n\n```jsx\nimport { RawHtml } from \"static-jsx\";\n\nconst page = (\n  \u003c\u003e\n    {new RawHtml(\"\u003c!DOCTYPE html\u003e\")}\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n        \u003ctitle\u003eExample page\u003c/title\u003e\n      \u003c/head\u003e\n      \u003cbody\u003eHello, world!\u003c/body\u003e\n    \u003c/html\u003e\n  \u003c/\u003e\n);\n```\n\n### Node.js\n\nYou can install static-jsx using any package manager using the NPM registry,\nsuch as NPM itself:\n\n```shell\nnpm install static-jsx\n```\n\nFrom here, you will need to set up your transpiler. The automatic JSX transform\nis recommended, since it avoids manual imports, but either the classic or\nautomatic JSX transform may be used.\n\nNote: this package is\n[ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c),\nso it cannot be used with `require`. Additionally, the automatic JSX transform,\nwhich will implicitly import `static-jsx/jsx-runtime`, relies on support for the\n`exports` field in `package.json` to resolve this module. This causes issues for\ncertain tools (notably, TypeScript) which do not currently understand this\nfield. The classic JSX transform can be used in this case, at the cost of manual\nimports in JSX files.\n\n#### Babel\n\nYou can use\n[`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react). Sample\n`.babelrc.json`:\n\n```json\n{\n  \"presets\": [\n    [\n      \"@babel/preset-react\",\n      {\n        \"runtime\": \"automatic\",\n        \"importSource\": \"static-jsx\"\n      }\n    ]\n  ]\n}\n```\n\nSee `examples/babel` for an example.\n\n#### TypeScript\n\nYou can configure JSX in your `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"h\",\n    \"jsxFragmentFactory\": \"Fragment\"\n  }\n}\n```\n\nSee `examples/typescript` for an example.\n\nOn nightly versions of TypeScript, using the `nodenext` module setting, you can\nuse the automatic JSX transform to avoid having to import `h` and `Fragment`\nmanually:\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"static-jsx\"\n  }\n}\n```\n\nThe reason why this only works on nightly versions of TypeScript is because the\nautomatic JSX runtime is imported as `static-jsx/jsx-runtime`, which is only\nexposed using the `exports` field in `package.json`, and only the `nodenext`\nmodule option understands the `exports` field.\n\n### Deno\n\nstatic-jsx supports TypeScript natively, allowing it to work well in Deno\nprojects. There are several ways to configure JSX in Deno: for more details,\nrefer to the [manual section on JSX](https://deno.land/manual/jsx_dom/jsx). A\nDeno-compatible CDN, such as [esm.sh](https://esm.sh), can be used to consume\nthe library.\n\nOne way is to configure the TypeScript compiler options in your configuration\nfile (e.g. `deno.json`):\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"jsxImportSource\": \"https://esm.sh/static-jsx@alpha\"\n  }\n}\n```\n\nNote that, at the time of writing (Deno version 1.17), you will need to provide\nan additional command-line argument to `deno run` and similar commands:\n`--config deno.json`.\n\nAnother way is to use the `jsxImportSource` pragma comment in each JSX file in\nyour project:\n\n```jsx\n/** @jsxImportSource https://esm.sh/static-jsx@alpha */\n\n// Your JSX/TSX here\n```\n\n## Developer setup\n\nTo install dependencies and run the project tests, run the following commands in\nthe project directory:\n\n```shell\nnpm install\nnpm run build\nnpm test\n```\n\nNote that running the tests requires Node.js 16 or higher, due to use of the\nexperimental loader API which was changed in Node.js 16. This does not affect\n_using_ the library in lower versions of Node.js, which will work with any\nversion that supports ES modules.\n\n## License\n\nThis is free software, released under the\n[MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianprime0509%2Fstatic-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fianprime0509%2Fstatic-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianprime0509%2Fstatic-jsx/lists"}