{"_id":"@bombits/esm-template","name":"@bombits/esm-template","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bombits/esm-template","version":"0.1.0","type":"module","exports":{"import":"./lib/index.js","require":"./lib/index.umd.cjs"},"scripts":{"dev":"vite","preview":"vite preview","build":"vite build"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/node":"^18.8.5","@types/react":"^18.0.17","@types/react-dom":"^18.0.6","typescript":"^4.8.4","vite":"^3.1.0"},"gitHead":"c5c2db609e9b52205bed50377dd595bead09c7c2","description":"A simple template to write React/Typescript using Vite tooling to transpile/pack into a plain ES module that uses CDN as a first feature","_id":"@bombits/esm-template@0.1.0","_nodeVersion":"18.7.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-DKLv86ImTvE6hq3DN5LXuStnMQ1r4E8a1HVdRd8hSfMajIFPgxirAjoNGXKY4W5EizirQP6VXIEq3WsLdOij5w==","shasum":"2514ac81f00f0769a281000da0dc7f303c23bcb1","tarball":"https://registry.npmjs.org/@bombits/esm-template/-/esm-template-0.1.0.tgz","fileCount":16,"unpackedSize":10990,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEExcCT18WW6mUcKeglHmcBGlUGQHwGxMIvXmMIaGC64AiEAxW/mzwkOiGf+RcuTbryrhri8oqTWE7uzXoCqEdX3iw8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTPTTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWeBAAo+Ss8A1uU0DdgHl1zrqnB7KdiUOsdzZNuYEYQAB8XlHM5JCW\r\nVX4DqdHN89cyDWP1FhHql+66ZldpjrSqyLWt0sc06TubzAdVXzdhRZGusF2W\r\nNY1cqiPc7f4LP4aHFFQ9A4KA/sTdLuYMZ44lFV983GthFBvwsHpGK0DmQyCo\r\nRI4ob2ftbeAPA8QNgbxhYj2gR0SofEF5Jtb3e4RzVSqquZqu5/y/QChmZRX4\r\nhg4etGLk+6cPpJ/Q71krYaHvw3HL+lG9gBEq+F9GuhQRs/7R/rxl/fW/lCNQ\r\nuW53dTaqgezeQlA7KoOf9mnYK343QefHGiWiZO/rVZEITX8guCpKnEus7rsf\r\nAhDAQgjDh8Hl+SVcIUjpt463uejheMHgeeWD+yqqqo195vu39Jq6QjLok+tJ\r\nCdCMZxCOKsEJOpet2HftwTkR3rz1wSeBBKxTTvKOTi8dQLr1pe67t+nVQxzJ\r\nvbWw5SXZD9YlLPngPdUHH/4k3s3rRQi8ErlGtKlUDxlVkD4OopmXZmy6o0UJ\r\nKoJfacNbzKIsBcHwyKRbhnKo/G2YUWHvvaIvBMrFCUwBKCWLf5gL7D6kHzN+\r\nlki1wKaNtQN+sghBp3gQohx82Ee9gzuIIAaykpQkoSE2Ilo79RgC4xJLYHwp\r\nncqJ8/Q3KQpSFww+QwraMV3sbxO4d9poUeQ=\r\n=EYBk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"rayntriton","email":"rayntriton@gmail.com"},"directories":{},"maintainers":[{"name":"rayntriton","email":"rayntriton@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/esm-template_0.1.0_1665987795318_0.6987097978711332"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-17T06:23:15.266Z","0.1.0":"2022-10-17T06:23:15.490Z","modified":"2022-10-17T06:23:15.615Z"},"maintainers":[{"name":"rayntriton","email":"rayntriton@gmail.com"}],"description":"A simple template to write React/Typescript using Vite tooling to transpile/pack into a plain ES module that uses CDN as a first feature","readme":"# ES Module Template\n## Write React/TS and get single ESM file\n\nA simple template to write React/Typescript using Vite tooling to transpile/pack into a plain ES module that uses CDN as a first feature\n\nThis package was created via ``` npx vite create```, then appending ``` types/externalDeps.d.ts``` and  ``` deps.ts``` and targeting configs to ESNext\n\n## Example\n\n### Input\n\n> ``` myESModule.tsx```\n\n```tsx\nimport { React }  from './deps'\nimport { hello } from './hello'\n\nexport function MyESModule(){\n  return (\n    <div>\n      { hello( 'esm' ) }\n    </div>\n  )\n}\n```\n> ``` hello.ts```\n```ts\nexport function hello( name?:string ){\n  let message = `hello ${ name }` \n  return message\n}\n```\n\n### Output\nAfter ``` yarn build``` ie ``` vite build```\n> ``` /lib/index.js```\n```js\nimport * as CDNReact from \"https://cdn.skypack.dev/react\";\nconst React = CDNReact;\nfunction hello(name) {\n  return `hello ${name}`;\n}\nfunction MyESModule() {\n  return /* @__PURE__ */ React.createElement(\"div\", null, hello(\"esm\"));\n}\nexport {\n  MyESModule\n};\n\n```\n### CDN\nTo understand the CDN part, we have two typescript helpers:\n\n> ``` types/externalDeps.d.ts```\n```ts\ndeclare module 'https://*'\ndeclare module 'https://cdn.skypack.dev/react'\n```\n\nand\n\n> ``` deps.ts```\n```ts\nimport * as React_ from 'react'\nimport * as CDNReact from 'https://cdn.skypack.dev/react'\n\nexport const React = CDNReact as unknown as typeof React_\n```\n\n\n","readmeFilename":"readme.md"}