{"_id":"@atomify/jsx-runtime","_rev":"1-5bc5178de7d71fbe3187f75423f8a121","name":"@atomify/jsx-runtime","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@atomify/jsx-runtime","version":"0.1.1","description":"JSX runtime for babel","url":"https://github.com/dvens/atomify","license":"MIT","module":"./dist/esm/index.js","main":"dist/cjs/index.js","typings":"./dist/esm/index.d.ts","directories":{"test":"test"},"scripts":{"build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json","checksize":"rollup -c ; rm ./dist/index.bundled.js","regen-package-lock":"rm -rf node_modules package-lock.json; npm install"},"author":{"name":"Dylan Vens"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-transform-typescript":"^7.2.0","rollup":"^0.64.1","rollup-plugin-filesize":"^4.0.1","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-terser":"^1.0.1","typescript":"^3.4.1","uglify-es":"^3.3.9"},"dependencies":{"@atomify/jsx":"^2.2.4","@atomify/shared":"^1.2.2"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/dvens/atomify.git"},"bugs":{"url":"https://github.com/dvens/atomify/issues"},"homepage":"https://github.com/dvens/atomify","gitHead":"1adfdb608920a310bf8b68cc98522156ebf1006a","_id":"@atomify/jsx-runtime@0.1.1","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (darwin)","_npmUser":{"name":"dvens","email":"d.joelvens@gmail.com"},"dist":{"integrity":"sha512-cjMTRdUjRHdWioCsEyxu4xXWReX3lDBH6e7zJMv1TLeVne+r1rzT62X9B+ByTvOAjAe3KOyRIrEocNsBWhMZzQ==","shasum":"e0385e4d76328fce9c58361cd9136434ca0d2122","tarball":"https://registry.npmjs.org/@atomify/jsx-runtime/-/jsx-runtime-0.1.1.tgz","fileCount":12,"unpackedSize":11207,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbO1JUsaAju76jxckpMenk2jZDYWyhyi/dVKnqKb3RrgIgYaYfX4YqjgcSi/ruvlGxDQwgd1GDoE5vg3VLLgna3Mk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmxlvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvhRAAoP2FN3f1Awoj43j8HhiT86hpsnSQfhNwnr9CKNRcrHVrO9qJ\r\n7fj8jQ7eNztMfFk1azEqIOEqhPz2xM0XKNNW4ZbDOj/Dsk5ai7onnFXu2/q5\r\nXx9+pcGYN7OfWR2Hz1pQOvAPB3qs6m0QGD94F09zvf4HzmBs91my4SwPmusC\r\n7rv/nROdLn+EiqdegEPmuHKWlKhr7Ph+xWu1grNFRXeRRYBUCjLUAegW0RbT\r\nlahI5/M/q2e2FsbDb+y+ee/vynGcs+2AMDhuDTx6DqKn3sYfmHj+PSUSEW2x\r\nfY9fwmARBBRbBOawNsxY/YhzJnzNAxhmE3U+Y9UzvrGVHJYxvHAqswcSGeoz\r\nj/aHN7SWLF1hFjhKvZVptuJHEL6Eam6Bbfb6l9qVcqu9pIvDI501R79MTNi5\r\nvwoIRzZcMMj+71iFp2KJgVs1J8COwQ6InDTxJa5IVU8vuCdBrSvinYQcMVJ5\r\nsoBav1SBwQDpPhJnCV7ghf7WbvmUyM0mWvWnDxjmH0yEqZa+QsgAG/s8Go+c\r\nc1ceIT+n9EdGtnHhtBxGPs3X1YfRlcKUFcNqOKjHjSxxbkLM3MYSgZjYL6w2\r\nlWIJfz5qRjXo0Sg4HMqc62YT4gHC58zTrE2pmgNLdwH7eQv/YVWyMBKo8ZYs\r\n2B2FUyFE8aytYuId051xR9B/MGM3FAnNqC8=\r\n=bThQ\r\n-----END PGP SIGNATURE-----\r\n"},"maintainers":[{"name":"dvens","email":"d.joelvens@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsx-runtime_0.1.1_1671108974932_0.8936972657456224"},"_hasShrinkwrap":false},"0.1.2":{"name":"@atomify/jsx-runtime","version":"0.1.2","description":"JSX runtime for babel","url":"https://github.com/dvens/atomify","license":"MIT","module":"./dist/esm/index.js","main":"dist/cjs/index.js","typings":"./dist/esm/index.d.ts","directories":{"test":"test"},"scripts":{"build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json","checksize":"rollup -c ; rm ./dist/index.bundled.js","regen-package-lock":"rm -rf node_modules package-lock.json; npm install"},"author":{"name":"Dylan Vens"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-transform-typescript":"^7.2.0","rollup":"^0.64.1","rollup-plugin-filesize":"^4.0.1","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-terser":"^1.0.1","typescript":"^3.4.1","uglify-es":"^3.3.9"},"dependencies":{"@atomify/jsx":"^2.2.5","@atomify/shared":"^1.2.2"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/dvens/atomify.git"},"bugs":{"url":"https://github.com/dvens/atomify/issues"},"homepage":"https://github.com/dvens/atomify","gitHead":"cee3bce1e050c6b5533193cce102c3d2524455af","_id":"@atomify/jsx-runtime@0.1.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.22.1/node@v10.15.0+x64 (darwin)","dist":{"integrity":"sha512-f05JURkJDAZL8PH0L4plhrHlfhtr8KezuR0PcSZN6hEcNrhbjWCdeW/zbQPnXa/zoaqhWUx9lbhBdxq9iR+KlQ==","shasum":"329bbcf8161983db132489611b1fab76817c10d9","tarball":"https://registry.npmjs.org/@atomify/jsx-runtime/-/jsx-runtime-0.1.2.tgz","fileCount":12,"unpackedSize":11207,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCctlvB1KMMcgmcRW1SbviJkY6dkmixhyKAV2YcaYqqUAIgOwRGrtG0BXWCewDZmzJgjN6joYWLFR05yuV3HI4RsC0="}]},"_npmUser":{"name":"dvens","email":"d.joelvens@gmail.com"},"maintainers":[{"name":"dvens","email":"d.joelvens@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsx-runtime_0.1.2_1686076080278_0.44807242594325913"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-15T12:56:14.663Z","0.1.1":"2022-12-15T12:56:15.093Z","modified":"2023-06-06T18:28:00.585Z","0.1.2":"2023-06-06T18:28:00.483Z"},"maintainers":[{"name":"dvens","email":"d.joelvens@gmail.com"}],"description":"JSX runtime for babel","homepage":"https://github.com/dvens/atomify","repository":{"type":"git","url":"git+https://github.com/dvens/atomify.git"},"author":{"name":"Dylan Vens"},"bugs":{"url":"https://github.com/dvens/atomify/issues"},"license":"MIT","readme":"# @atomify/jsx\nSmall library for creating Custom Elements from JSX Markup.\n\n## Installation @atomify/jsx\n```sh\nnpm i @atomify/jsx\n```\n\n## Configuration\n@atomify/jsx requires `@babel/plugin-syntax-jsx` and `@babel/plugin-transform-react-jsx`.\n\n```sh\nnpm install --save-dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx\nyarn add --dev @babel/plugin-syntax-jsx @babel/plugin-transform-react-jsx\n```\n\nAfter you installed the plugins you no need to configure your Babel Settings\n\n```json\n{\n  \"plugins\": [\n    \"@babel/plugin-syntax-jsx\",\n    [\"@babel/plugin-transform-react-jsx\", { \"pragma\": \"h\" }]\n  ]\n}\n```\n\nand add the following to your tsconfig.json:\n\n```json\n\"compilerOptions\": {\n    \"jsx\": \"react\",\n    \"jsxFactory\": \"h\",\n}\n```\n\n@atomify/jsx works together with `@atomify/hooks`\n\n## Render function\nTo get started using @atomify/jsx, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument:\n\n```tsx\nimport { h, render } from '@atomify/jsx';\nfunction Title(text: string) {\n    return <h1>{text}</h1>\n}\nrender(<Title text=\"Hello world!\" />, document.body);\n```\n\n## Serverside rendering\n`@atomify/jsx` is shipped with a `renderToString` that will functional components into HTML string for SSR usage.\n\n```tsx\nimport { renderToString } from '@atomify/jsx'\nfunction Title(text: string) {\n    return <h1>{text}</h1>\n}\n\nconst result = renderToString(<Title text=\"Hello world\" />);\n\nconsole.log(result) // <h1>Hello world</h1>\n```\n\n*@atomify/hooks*\n\n```tsx\nimport { h , Fragment } from '@atomify/jsx';\nimport { defineElement, useProp} from '@atomify/hooks';\n\nconst CustomElement: FCE = () => {\n    const [title] = useProp<Number>('title', 'Hello world!');\n\n    return (\n        <Fragment>\n            <h1>{ title }</h1>\n            <h2>Example title2</h2>\n        </Fragment>\n    );\n};\n\nCustomElement.props = {\n    someTitle: {\n        type: Number,\n        reflectToAttr: true,\n    }\n};\n\ndefineElement('custom-element', CustomElement);\n```\n\n## Class and Classname\nBoth `class` and `className` are supported. The `class` attribute doesnt support `object` or `array` anymore since version 2.0 it will be using a plugin that can be installed through `@atomify/shared` (it accepts a string, array, object or everything combined):\n\n```tsx\nimport { classNames } from '@atomify/shared';\n\n<div\n    className={classNames('aaa',\n        { test1: true, test2: false }, [\n        '1',\n        false,\n    ])}>\n</div>\n```\n\n## Ref\nThe `ref` attribute accepts a `function` or a direct `ref` object. The `ref` object must include the `current` property.\n","readmeFilename":"README.md"}