{"id":26693867,"url":"https://github.com/slogsdon/jsx-for-web-components","last_synced_at":"2025-04-13T00:34:33.135Z","repository":{"id":141996389,"uuid":"163313422","full_name":"slogsdon/jsx-for-web-components","owner":"slogsdon","description":"WIP: A basic JSX factory for use in projects leveraging web components","archived":false,"fork":false,"pushed_at":"2018-12-29T20:56:29.000Z","size":98,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T00:34:07.866Z","etag":null,"topics":["jsx","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/jsx-for-web-components","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/slogsdon.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":"2018-12-27T16:06:34.000Z","updated_at":"2024-07-18T03:35:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0d479b8-8d52-4b82-b94f-601e0364db0c","html_url":"https://github.com/slogsdon/jsx-for-web-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slogsdon%2Fjsx-for-web-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slogsdon%2Fjsx-for-web-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slogsdon%2Fjsx-for-web-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slogsdon%2Fjsx-for-web-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slogsdon","download_url":"https://codeload.github.com/slogsdon/jsx-for-web-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650484,"owners_count":21139670,"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":["jsx","web-components"],"created_at":"2025-03-26T18:27:33.209Z","updated_at":"2025-04-13T00:34:33.129Z","avatar_url":"https://github.com/slogsdon.png","language":"TypeScript","funding_links":[],"categories":["Web Components"],"sub_categories":["Tools"],"readme":"# jsx-for-web-components\n\n[![Build Status](https://travis-ci.com/slogsdon/jsx-for-web-components.svg?branch=master)](https://travis-ci.com/slogsdon/jsx-for-web-components)\n\n\u003e WIP: A basic JSX factory for use in projects leveraging [web components](https://www.webcomponents.org/)\n\n### Features\n\n- Drop-in ready\n- [TypeScript](https://www.typescriptlang.org/) support\n\n## Requirements\n\n- Compiler that can convert JSX to JSX factory JavaScript calls\n\n## Installation\n\n```\nyarn add jsx-for-web-components\n```\n\n## Getting Started\n\nWe'll use TypeScript and [Rollup](https://rollupjs.org) to build for the browser. Let's start with pulling in some dependencies:\n\n```\nyarn add --dev typescript rollup rollup-plugin-node-resolve rollup-plugin-typescript2\n```\n\nA couple configuration files to help the project build correctly:\n\n\u003e ./tsconfig.json\n\n```json\n{\n  \"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"h\",\n    \"moduleResolution\": \"node\",\n    \"target\": \"es2015\"\n  }\n}\n```\n\n\u003e ./rollup.config.js\n\n```js\nimport resolve from \"rollup-plugin-node-resolve\";\nimport typescript from \"rollup-plugin-typescript2\";\n\nexport default {\n  input: \"./src/index.tsx\",\n  output: {\n    file: \"./dist/index.js\",\n    format: \"iife\",\n  },\n  plugins: [\n    resolve({\n      extensions: [ '.js', '.ts', '.tsx' ],\n    }),\n    typescript({\n      typescript: require(\"typescript\"),\n    }),\n  ],\n};\n```\n\nDefine your custom element:\n\n\u003e ./src/index.tsx\n\n```tsx\nimport { h, JSXCustomElement } from \"jsx-for-web-components\";\n\nclass ExampleElement extends JSXCustomElement {\n  static elementName = \"example-element\";\n\n  public render() {\n    return \u003cdiv id=\"testing\"\u003ehello\u003c/div\u003e;\n  }\n}\n\nExampleElement.register();\n```\n\nLeverage your custom element:\n\n\u003e ./index.html\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003cscript src=\"/dist/index.js\" defer\u003e\u003c/script\u003e\n\u003cexample-element\u003e\u003c/example-element\u003e\n```\n\nAfter building the project with `rollup -c rollup.config.js`, you should be able to load your HTML in a browser to see your work.\n\n## Notes\n\n### `connectedCallback`\n\nWhile there is some setup performed within the `constructor` of `JSXCustomElement`, the DOM nodes defined by your `render` method are not attached until the `connectedCallback` method is called. If you need to leverage this callback within your code, be sure to call the super method, e.g.:\n\n```ts\nclass ExampleElement extends JSXCustomElement {\n  // ...\n  public connectedCallback() {\n    super.connectedCallback();\n\n    // your code\n  }\n}\n```\n\n## License\n\nThis project is licensed under the MIT License. See [LICENSE](LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslogsdon%2Fjsx-for-web-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslogsdon%2Fjsx-for-web-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslogsdon%2Fjsx-for-web-components/lists"}