{"id":22045961,"url":"https://github.com/denisstasyev/rollup-plugin-inline-code","last_synced_at":"2025-05-08T07:50:25.749Z","repository":{"id":49150338,"uuid":"378822141","full_name":"denisstasyev/rollup-plugin-inline-code","owner":"denisstasyev","description":"Rollup plugin to inline JavaScript code with TypeScript support based on prefix","archived":false,"fork":false,"pushed_at":"2021-07-13T06:47:01.000Z","size":586,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-27T04:51:22.537Z","etag":null,"topics":["build","build-tool","inline","inline-code","inline-data","inline-javascript","insert","insert-code","insert-data","insert-javascript","rollup","rollup-plugin"],"latest_commit_sha":null,"homepage":"","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/denisstasyev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-21T05:57:15.000Z","updated_at":"2025-04-10T15:35:08.000Z","dependencies_parsed_at":"2022-08-25T15:21:39.255Z","dependency_job_id":null,"html_url":"https://github.com/denisstasyev/rollup-plugin-inline-code","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisstasyev%2Frollup-plugin-inline-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisstasyev%2Frollup-plugin-inline-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisstasyev%2Frollup-plugin-inline-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisstasyev%2Frollup-plugin-inline-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denisstasyev","download_url":"https://codeload.github.com/denisstasyev/rollup-plugin-inline-code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253025335,"owners_count":21842409,"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":["build","build-tool","inline","inline-code","inline-data","inline-javascript","insert","insert-code","insert-data","insert-javascript","rollup","rollup-plugin"],"created_at":"2024-11-30T13:15:56.098Z","updated_at":"2025-05-08T07:50:25.732Z","avatar_url":"https://github.com/denisstasyev.png","language":"TypeScript","readme":"# rollup-plugin-inline-code\n\n[![NPM version](https://img.shields.io/npm/v/rollup-plugin-inline-code.svg?style=flat)](https://www.npmjs.com/package/rollup-plugin-inline-code) [![NPM downloads](https://img.shields.io/npm/dm/rollup-plugin-inline-code.svg?style=flat)](https://www.npmjs.com/package/rollup-plugin-inline-code) [![Svelte v3](https://img.shields.io/badge/rollup-blueviolet.svg)](https://rollupjs.org/) ![Coverage](./coverage/badge-lines.svg) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nRollup plugin for inline scripts into code\n\n## :rocket: Features\n\nThis Rollup plugin is like [raw-loader](https://v4.webpack.js.org/loaders/raw-loader/) plugin for Webpack\n\n- Easy to use (simple configuration)\n- Fully customizable: you can adjust it for yourself :t-rex:\n- Suitable for inline JavaScript, TypeScript, SVG files (and any assets)\n- Typescript code highlighting works :fire:\n- Tests with Node.js 12, 14, 16 :+1:\n\n## Install\n\n```bash\nnpm i rollup-plugin-inline-code\n```\n\n## Usage\n\nStart by updating your **rollup.config.js** file\n\n**rollup.config.js**\n\n```javascript\nimport inlineCode from 'rollup-plugin-inline-code'\n\nexport default {\n  input: ...,\n  output: ...,\n  plugins: [inlineCode()],\n}\n```\n\nThen modify the import with the prefix `inline!`\n\n**Any JavaScript or TypeScript file of your project**\n\n```javascript\nimport html from 'common-tags/lib/html' // Optional template literal tag function to remove spaces inside HTML-like string\n\nimport INLINE_SCRIPT from 'inline!./src/assets/inline.js' // Note the extension is important here (not to be missed)\nimport INLINE_SVG from 'inline!./src/assets/sample.svg'\n\n...\n\nreturn html`\n  \u003c!DOCTYPE html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      ...\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003c!-- Inline Script --\u003e\n      \u003cscript\u003e\n        ${INLINE_SCRIPT}\n      \u003c/script\u003e\n\n      \u003c!-- Inline SVG --\u003e\n      ${INLINE_SVG}\n\n      ...\n    \u003c/body\u003e\n  \u003c/html\u003e\n`\n...\n```\n\nThis [rollup-plugin-inline-code](https://github.com/denisstasyev/rollup-plugin-inline-code) replaces `INLINE_SCRIPT` and `INLINE_SVG` with file contents, success :confetti_ball:\n\n## TypeScript syntax highlighting\n\nYou can simply fix the code highlighting when importing into Typescript files. To do this, you need to declare a global module\n\n**src/typings/global.d.ts**\n\n```typescript\ndeclare module 'inline!*' {\n  const inlineCode: string\n  export default inlineCode\n}\n```\n\nThen you need to modify **tsconfig.json** to set global typings path with the `typeRoots` option\n\n**tsconfig.json**\n\n```json\n{\n  \"compilerOptions\": {\n    ...\n    \"typeRoots\": [\"node_modules/@types\", \"src/typings/global.d.ts\"]\n\t...\n  },\n  ...\n}\n```\n\nThat's it, restart your TypeScript server and see no import errors :tada:\n\nP.S. To restart the TypeScript server in VSCode, you need to open search (`Cmd+P` on MacOS) and then type `TypeScript: Restart TS server` with any open TypeScript file\n\n## API\n\n### Parameters\n\n| Name   | Type   | Default   | Description                         |\n| ------ | ------ | --------- | ----------------------------------- |\n| prefix | string | `inline!` | Custom prefix to detect inline code |\n\nTo use parameters, pass them in **rollup.config.js** as shown below\n\n**rollup.config.js**\n\n```javascript\n...\nplugins: [inlineCode({ prefix: 'myCustomPrefix!' })]\n...\n```\n\n## License\n\nMIT \u0026copy; [Denis Stasyev](https://github.com/denisstasyev)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisstasyev%2Frollup-plugin-inline-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenisstasyev%2Frollup-plugin-inline-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisstasyev%2Frollup-plugin-inline-code/lists"}