{"id":13532103,"url":"https://github.com/high1/solid-jsx","last_synced_at":"2025-04-05T05:09:46.769Z","repository":{"id":43902492,"uuid":"441287908","full_name":"high1/solid-jsx","owner":"high1","description":"mdx for solid-js","archived":false,"fork":false,"pushed_at":"2025-03-31T07:30:40.000Z","size":524,"stargazers_count":77,"open_issues_count":6,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T02:37:22.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/high1.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}},"created_at":"2021-12-23T20:23:26.000Z","updated_at":"2025-03-31T07:29:57.000Z","dependencies_parsed_at":"2023-11-11T20:23:35.364Z","dependency_job_id":"82419d93-ad0e-47b2-9e50-53831849c58a","html_url":"https://github.com/high1/solid-jsx","commit_stats":{"total_commits":142,"total_committers":7,"mean_commits":"20.285714285714285","dds":0.4436619718309859,"last_synced_commit":"ef6581d93efbdaf5e5501ff464747a6242dbffbb"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/high1%2Fsolid-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/high1%2Fsolid-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/high1%2Fsolid-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/high1%2Fsolid-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/high1","download_url":"https://codeload.github.com/high1/solid-jsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"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-08-01T07:01:08.226Z","updated_at":"2025-04-05T05:09:46.750Z","avatar_url":"https://github.com/high1.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# solid-jsx\n\n## What?\n\nUse [mdx](https://mdxjs.com/) or [xdm](http://wooorm.com/xdm/) with [solid-js](https://www.solidjs.com/).\n\nThis module is ESM only, due to [mdx](https://mdxjs.com/) and [xdm](http://wooorm.com/xdm/) being ESM only.\n\nAdding\n\n```json\n\"type\": \"module\"\n```\n\nin package.json is one option.\n\n## Installation\n\n```sh\npnpm install --save-dev solid-jsx\n```\n\n## Usage\n\nThis library can be used alongside version 2 of [@mdx-js](https://mdxjs.com/), or [xdm](http://wooorm.com/xdm/) by setting the jsxImportSource property to **'solid-jsx'**.\n\nYou can use their official integration with various bundlers, and frameworks,\nbelow is an [@mdx-js](https://mdxjs.com/) configuration sample for [Vite](https://vitejs.dev), which supports rollup plugins.\n\n```js\nimport { defineConfig } from 'vite';\nimport solid from 'vite-plugin-solid';\nimport mdx from '@mdx-js/rollup';\nimport remarkGfm from 'remark-gfm';\n\nexport default defineConfig({\n  plugins: [mdx({ jsxImportSource: 'solid-jsx', remarkPlugins: [remarkGfm] }), solid()],\n  build: {\n    target: 'esnext',\n  },\n});\n```\n\nDraw math with [xdm](http://wooorm.com/xdm/) and [mathjax](https://www.mathjax.org/)\n\n```js\nimport solid from 'vite-plugin-solid';\nimport xdm from 'xdm/rollup.js';\nimport remarkMath from 'remark-math';\nimport uno from 'unocss/vite';\nimport remarkMath from 'remark-math';\nimport rehypeMathJaxSVG from 'rehype-mathjax/svg.js';\n\nexport default defineConfig({\n  plugins: [\n    xdm({\n      jsxImportSource: 'solid-jsx',\n      remarkPlugins: [remarkMath],\n      rehypePlugins: [rehypeMathJaxSVG],\n    }),\n    solid(),\n    uno(),\n  ],\n});\n```\n\nMore information -\u003e [Integrations](https://mdxjs.com/docs/getting-started/#integrations).\n\nAll markdown tags and custom components replacement are supported.\n\nHowever, since the code goes through the @mdx-js/xdm compiler and not through the solid-js compiler,\ninline components will not be reactive.\n\n```jsx\nexport const Counter = () =\u003e {\n  const [count, setCount] = createSignal(0);\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e setCount(count() + 1)}\u003eIncrement\u003c/button\u003e\n      \u003cp\u003e{count}\u003c/p\u003e\n    \u003c/\u003e\n  );\n};\n\u003cCounter /\u003e;\n```\n\nThis limitation is minor, since writing components inline is just one option,\nand by far the worst one of them all, with limited syntax and language support.\n\nYou can always import directly TypeScript/JavaScript components inside .mdx\n\n```mdx\nimport Counter from './Counter';\n\n\u003cCounter /\u003e\n```\n\nor pass the component to markdown directly\n\n```mdx\nHello \u003cCounter /\u003e\n```\n\n```jsx\nimport Message from './message.mdx';\n\n\u003cMessage components={{ Counter }} /\u003e;\n```\n\nTo have dynamic tags, use solid-js Dynamic component.\n\n```jsx\nconst options: Record\u003cstring, Component\u003e = {\n  red: RedThing,\n  green: GreenThing,\n  blue: BlueThing,\n};\n\u003cMessage\n  components={{\n    h2: 'h6',\n    h1: () =\u003e \u003cdiv\u003eTest\u003c/div\u003e,\n    Planet: () =\u003e \u003cDynamic component={options[selected()]} /\u003e,\n  }}\n/\u003e;\n```\n\nWhen nesting MDX files, importing components at the top or repeating the same set of those as parameters can become cumbersome.  \nYou can use MDXProvider to avoid this:\n\n```jsx\nimport { MDXProvider } from 'solid-jsx';\n\nrender(() =\u003e (\n  \u003cMDXProvider components={{ Tweet }}\u003e\n    \u003cApp /\u003e\n  \u003cMDXProvider\u003e\n  )\n);\n```\n\nThe package also provides Typescript support, the types can be referenced as \"solid-jsx/types\". In tsconfig.json:\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\"vite/client\", \"solid-jsx/types\"]\n  }\n}\n```\n\n## Support\n\nThis project is free and open-source, so if you think this project can help you or\nanyone else, you may [star it on GitHub](https://github.com/high1/solid-jsx). Feel\nfree to [open an issue](https://github.com/high1/solid-jsx/issues) if you have any\nideas, questions, or if you've found a bug.\n\n## Contribute\n\nThanks for being willing to contribute!\n\n**Working on your first Pull Request?** You can learn how from this _free_ series\n[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)\n\nWe are following the [Conventional Commits](https://www.conventionalcommits.org) convention.\n\n### Develop\n\n- `pnpm build`: Generate bundles\n- `pnpm lint`: Lints code\n\n## License\n\n`solid-jsx` is open source software [licensed as MIT](https://github.com/high1/solid-jsx/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhigh1%2Fsolid-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhigh1%2Fsolid-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhigh1%2Fsolid-jsx/lists"}