{"_id":"@d0whc3r/stencil-inline-file","_rev":"3-4fa6bbe8dd1d264c685cdfa18f28b9f5","name":"@d0whc3r/stencil-inline-file","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@d0whc3r/stencil-inline-file","version":"0.1.0","description":"A Stenciljs plugin to insert inline files in base64 into components","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"prebuild":"rimraf ./dist && npm run test && npm run lint","build":"tsc && npm run rollup","dev":"tsc --watch","lint":"tslint --project tsconfig.json","release":"np","rollup":"rollup -c","start":"npm run dev","test":"jest --coverage","test.watch":"jest --watch --coverage"},"keywords":["stencil","plugin","file","fonts","images","inline"],"author":{"name":"d0whc3r"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/d0whc3r/stencil-inline-file"},"devDependencies":{"@types/jest":"^24.0.6","@types/mime":"^2.0.1","@types/node":"^11.9.4","jest":"^24.1.0","np":"^4.0.2","rimraf":"^2.6.3","rollup":"^1.2.2","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-ionic-rules":"0.0.21","typescript":"^3.3.3"},"peerDependencies":{"mime":"^2.4.3"},"_id":"@d0whc3r/stencil-inline-file@0.1.0","dist":{"shasum":"3a49cde03c61604baf1059b1e088677dc8edf41a","integrity":"sha512-2GmmojgMdz2mNwWf6oTUvDsVFFoja0j+cb5QTFUwtY+4zGpcFpYoosuGKL2eCy82G0tgQh4GkD0F4Da5z0uG/g==","tarball":"https://registry.npmjs.org/@d0whc3r/stencil-inline-file/-/stencil-inline-file-0.1.0.tgz","fileCount":11,"unpackedSize":7204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+BZbCRA9TVsSAnZWagAA3pkQAI+zbYBWhVMnZJ2uYqdr\nyukS73DdevbjsO1YRWbZsUitZHQrLtWBX/46yfPmfc8OnbuSlijX88i5/3NB\n3iJ0tGDu+JTgPUD31o2DNXFJtwzikXWOgJXgfLyLzPtUrGSM6S8F/8nYi4i7\nsWDxZIMWfEJpw8/aQAl1kPMYk+NzKTnjaeEglfMO0rA7PNSn65ISAydJr+q/\nd6fAQWqZ1mKu1BCkBFtkrG3QPslcdWPNymen0vn+cS96/38dAdcupla+xV/J\ncmF/fLp0dLD2uAJvuZfYwDOUuAt75iTRBxuR8ymyht2son8qo92EbXTZo6/O\nb9QO3A9s5Fdj9PNYfz7ndIc6kHrBC7jX4WnlIteSYaMFQPuHc/3dB1x8HCmO\n0Qca0te/00QTlVcnWfCsjUbH20lIj0vayYpGUJN31Mo8heV4XPgSSI6pNlit\nxLdT0sv0AEusOICBwABtGMHOVYy9lMH1NlEvm7Z6DfUHY3YMO2Yb3TwW28+B\nSQ+t9UmuF6O5S3cwV2HLueLg1Em2NwiUjZDqlpxu73Ra4mS3jJptSsGAUNGi\nxMvQau/VMCvfwMCgXjsQ5+SkVacH6fYLaOifu62ewdSYPcKFynLTSg8JN4cR\nnDJMoIjR/lUW0IdtidYPGYhxRR+vWn3VJR9DuaN5X5x6G81ueydE5GiBihzF\nGL/S\r\n=RRdt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFT2UqRP3PpzVvhk4S1EFBL7rpn7TiBPKlMafo4n8S1EAiB3kwFiGj3G4jPl5byWeqpEihlOHEiJwxcsrOEWggVpVQ=="}]},"maintainers":[{"name":"d0whc3r","email":"d0whc3r@gmail.com"}],"_npmUser":{"name":"d0whc3r","email":"d0whc3r@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stencil-inline-file_0.1.0_1559762522828_0.36197723833853557"},"_hasShrinkwrap":false},"0.1.1":{"name":"@d0whc3r/stencil-inline-file","version":"0.1.1","description":"A Stenciljs plugin to insert inline files in base64 into components","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"prebuild":"rimraf ./dist && npm run test && npm run lint","build":"tsc && npm run rollup","dev":"tsc --watch","lint":"tslint --project tsconfig.json","release":"np","rollup":"rollup -c","start":"npm run dev","test":"jest --coverage","test.watch":"jest --watch --coverage"},"keywords":["stencil","plugin","file","fonts","images","inline"],"author":{"name":"d0whc3r"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/d0whc3r/stencil-inline-file"},"devDependencies":{"@types/jest":"^24.0.6","@types/mime":"^2.0.1","@types/node":"^11.9.4","jest":"^24.1.0","np":"^4.0.2","rimraf":"^2.6.3","rollup":"^1.2.2","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-ionic-rules":"0.0.21","typescript":"^3.3.3"},"dependencies":{"mime":"^2.4.3"},"_id":"@d0whc3r/stencil-inline-file@0.1.1","dist":{"shasum":"13966669207b289e3f456e1c53750efcc22fa56f","integrity":"sha512-t19ciXwBP8dw/DD372s1GraNmBCHG37qI91Q6ubsqaIcAQlXSrqIug3mjGOvc3vgMCOQWLvFDnrTzW9Z7lkP3g==","tarball":"https://registry.npmjs.org/@d0whc3r/stencil-inline-file/-/stencil-inline-file-0.1.1.tgz","fileCount":11,"unpackedSize":7200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+BlLCRA9TVsSAnZWagAAeoYP/j8FbA2Q2eZVro05Xbdk\nEOywDACUnwPxUD5HZWRgDEJL42fcw9iMhbs99lAqcfrgCGKlZakwwkGbezu9\nRUgXvH3FIxglSmFpRk/PxDtNFWj00pQB/ao8DLKTMDhTolI/YICIMz4h/hhv\nzZQBqot9hwkt3ULcEjjOiAnIWgJQ4/N/UdpVn38+UZ5NxWLgLK3JfEwR4Tf5\n2/bELKuCYkIwJJz9S0aeAKWCRwTxXZz0QnQG+hB2HduNfy0AkFkOOXvhQ4PG\nFnRpjEL6yVO/6gFqBZg2JB6BYsSoB0XP0nGjpIYJfTxoV7l72+EImQWL0ZiQ\nJBFZqGpvTq91aIIdNCJGIRLpQNOKnvIDP7A5ZGEqLai4zQkrXwEwK/rNjAI/\nbmwWEUfLxZGojcqRKD3aEc2mL8kBbCosI1X/lkgXVRdvqKX6pCK53FDPMq7R\n5AoUO2kBciqtIbiB4v8xOhYYj5KtdhMPpZlMWhKwzMMFV81LOmUa8Koh8o8t\nxbzsX3D2fu5YPNF2NWSjZgtqxNC2SKc3EVODblYZn/0200qqu632d08r/EAQ\nS/x+YRRb11GvMD0lNlHhEwFjOmQrTxiBEYiFdW9dF1eIWYmSn7tofB8mqSQT\nKeL+BO3ERBQpVb8SxJnRc4bj+v7B4iPRqVneNRzTECpBQXn0waw6BaEPrEGk\nwN/G\r\n=tkT6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy3DM4MOoSihSO3lHOHc9dKiZWzq5rct6YswrTD/N2ZwIhAOsIk1SRx8bS4LvAONd2+Ynh02ZU/bYwsg83uJ8JtOxR"}]},"maintainers":[{"name":"d0whc3r","email":"d0whc3r@gmail.com"}],"_npmUser":{"name":"d0whc3r","email":"d0whc3r@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stencil-inline-file_0.1.1_1559763275161_0.7581487632265391"},"_hasShrinkwrap":false},"0.1.2":{"name":"@d0whc3r/stencil-inline-file","version":"0.1.2","description":"A Stenciljs plugin to insert inline files in base64 into components","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"prebuild":"rimraf ./dist && npm run test && npm run lint","build":"tsc && npm run rollup","dev":"tsc --watch","lint":"tslint --project tsconfig.json","release":"np","rollup":"rollup -c","start":"npm run dev","test":"jest --coverage","test.watch":"jest --watch --coverage"},"keywords":["stencil","plugin","file","fonts","images","inline"],"author":{"name":"d0whc3r"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/d0whc3r/stencil-inline-file"},"devDependencies":{"@types/jest":"^24.0.6","@types/mime":"^2.0.1","@types/node":"^11.9.4","jest":"^24.1.0","np":"^4.0.2","rimraf":"^2.6.3","rollup":"^1.2.2","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-ionic-rules":"0.0.21","typescript":"^3.3.3"},"dependencies":{"mime":"^2.4.3"},"_id":"@d0whc3r/stencil-inline-file@0.1.2","dist":{"shasum":"7fc24ce24fec67c62398f998bb1593d87a0210f2","integrity":"sha512-MSqlsUM+CD0tHBBldLxiJCyVlf/SHhEQTgv+gw1430yCO+8NNXsTAVMCAbPRxgBqxGiMuol7kISO9pVygTrEsA==","tarball":"https://registry.npmjs.org/@d0whc3r/stencil-inline-file/-/stencil-inline-file-0.1.2.tgz","fileCount":11,"unpackedSize":7198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+KdWCRA9TVsSAnZWagAAD00P/1V7g4hn8RJmu0MTXB/c\nGdijhvD7pTZrK2Z/QKo+IFUKf2eQjN5EH4bl1rwzq5TTBZ0M8vhzvhp4eif1\ni4ZKwTfS2hwBgl6RZAbYBK3XOCXoxZBGoLd1V/jcYe7JvnOloLpKzyZeRBnc\ndvWdtEYQDCGe1GE9sORDJ9AEQ3sSJX7RSE0J59qESb4su2p9NoihgB3GjSpr\nK2nBWzGG3As4Vx7vER5TlGhkF0wBnIjtnVrVGIrK8mHNppdmipQs4l1/DYex\nZmIaijjxg0pKH59O2FAMTwk8JLlrvIAMqhH2cf73kYIyLplStlKH7onBzY/G\nNCsqaIQC5jTskWUcfz7LQt+epB+VKrybrlbWaJxWxK+lHCec46UmQ3BBR3WG\nc+KiOOX7E6UoddaAkzgCkEX/t+WV8/NZnoMtjU2VGojDxSKIaPU/o2hHkCwZ\nKYvW3MKo67H3fx65+/kVMvgx2j6Ezk/pN33uTflGqhv5OiCf7viKNADiwGTc\nss1XRJFX6YwoGqUhF9kV77AvFnOZV4RV6d3r18IYVgxpayB67diVMWuVYf9W\nU1oQEdZEGmZ1tCJGd4o4uaxPbDWfwOWcIlezI+LG4Z30nbZTDo6ms09zXnnj\nVNBwjziqM+Wvoi9apDTFpH43GmdBq81mxKJ/g35jnLeR/R3Po0CY6p5lk0Ie\nQDE6\r\n=26VD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBklea4D5tR0c8lG3KsulvfbTqXjSrmAgV2WPrNRf/65AiAOQKnaKsJeXGjODtb1ZV5UkPB9ZS+oDCxyf4PpZi1g2A=="}]},"maintainers":[{"name":"d0whc3r","email":"d0whc3r@gmail.com"}],"_npmUser":{"name":"d0whc3r","email":"d0whc3r@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stencil-inline-file_0.1.2_1559799637976_0.07351336220877891"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-05T19:22:02.789Z","0.1.0":"2019-06-05T19:22:02.979Z","modified":"2022-04-05T02:28:53.220Z","0.1.1":"2019-06-05T19:34:35.273Z","0.1.2":"2019-06-06T05:40:38.117Z"},"maintainers":[{"name":"d0whc3r","email":"d0whc3r@gmail.com"}],"description":"A Stenciljs plugin to insert inline files in base64 into components","keywords":["stencil","plugin","file","fonts","images","inline"],"repository":{"type":"git","url":"git+https://github.com/d0whc3r/stencil-inline-file"},"author":{"name":"d0whc3r"},"license":"MIT","readme":"# stencil-inline-file\n\nA Stenciljs plugin to insert inline files in base64 into components on build time.\n\n## Installation\n\n```bash\nnpm install -D @d0whc3r/stencil-inline-file\n```\n\n## Usage\n\nFirst of all, you need to declare the global extension module on your TypeScript project, if you haven't done that yet so it will be possible to directly import fonts files `import FontWoff from './my-font.woff'`.\n\n```javascript\n// src/typings.d.ts (example name)\ndeclare module '*.woff' {\n  const woffContent: string;\n\n  export default woffContent;\n}\n```\n\n> Instead of *.woff you need to create as many as need\n\nImport the plugin on your `stencil.config.ts` file and add the `inlineFile` function to your plugins list.\n\n```javascript\nimport { Config } from '@stencil/core';\nimport { inlineFile } from '@d0whc3r/stencil-inline-file';\n\nexport const config: Config = {\n  namespace: 'mycomponent',\n  outputTargets: [\n    { type: 'dist' },\n    { type: 'docs' },\n    {\n      type: 'www',\n      serviceWorker: null, // disable service workers\n    },\n  ],\n  plugins: [inlineFile(/\\.(woff|woff2|eot|png)$)/i],\n};\n```\n\nNow, just import your file and set it where you need\n\n```javascript\nimport { Component } from '@stencil/core';\nimport woffFont from '../../assets/fonts/myfont.woff';\nimport woff2Font from '../../assets/fonts/myfont.woff2';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.css',\n  shadow: true,\n})\nexport class MyComponent {\n  componentWillLoad() {\n    this.renderIconsHead();\n  }\n  renderIconsHead() {\n    const styleId = 'awesome-icons';\n    const head = document.head || document.getElementsByTagName('head')[0];\n    if (!head.querySelector(`style[s-id=${styleId}]`)) {\n      const style = document.createElement('style');\n      style.setAttribute('s-id', styleId);\n      style.setAttribute('type', 'text/css');\n      const css = `@charset \"UTF-8\";\n@font-face {\n  font-family: \"awesome-icons\";\n  src: url(${woffFont}) format('woff'),\n       url(${woff2Font}) format('woff2');\n  font-weight: normal;\n}`;\n      style.appendChild(document.createTextNode(css));\n      head.appendChild(style);\n    }\n  }\n\n  render() {\n    return <div>....</div>;\n  }\n}\n```\n\n## Links\n\nStenciljs - https://stenciljs.com/\n","readmeFilename":"readme.md"}