https://github.com/denisstasyev/rollup-plugin-inline-code
Rollup plugin to inline JavaScript code with TypeScript support based on prefix
https://github.com/denisstasyev/rollup-plugin-inline-code
build build-tool inline inline-code inline-data inline-javascript insert insert-code insert-data insert-javascript rollup rollup-plugin
Last synced: 2 months ago
JSON representation
Rollup plugin to inline JavaScript code with TypeScript support based on prefix
- Host: GitHub
- URL: https://github.com/denisstasyev/rollup-plugin-inline-code
- Owner: denisstasyev
- License: mit
- Created: 2021-06-21T05:57:15.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-13T06:47:01.000Z (about 4 years ago)
- Last Synced: 2025-04-27T04:51:22.537Z (3 months ago)
- Topics: build, build-tool, inline, inline-code, inline-data, inline-javascript, insert, insert-code, insert-data, insert-javascript, rollup, rollup-plugin
- Language: TypeScript
- Homepage:
- Size: 572 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# rollup-plugin-inline-code
[](https://www.npmjs.com/package/rollup-plugin-inline-code) [](https://www.npmjs.com/package/rollup-plugin-inline-code) [](https://rollupjs.org/)  [](https://github.com/semantic-release/semantic-release)
Rollup plugin for inline scripts into code
## :rocket: Features
This Rollup plugin is like [raw-loader](https://v4.webpack.js.org/loaders/raw-loader/) plugin for Webpack
- Easy to use (simple configuration)
- Fully customizable: you can adjust it for yourself :t-rex:
- Suitable for inline JavaScript, TypeScript, SVG files (and any assets)
- Typescript code highlighting works :fire:
- Tests with Node.js 12, 14, 16 :+1:
## Install
```bash
npm i rollup-plugin-inline-code
```
## Usage
Start by updating your **rollup.config.js** file
**rollup.config.js**
```javascript
import inlineCode from 'rollup-plugin-inline-code'
export default {
input: ...,
output: ...,
plugins: [inlineCode()],
}
```
Then modify the import with the prefix `inline!`
**Any JavaScript or TypeScript file of your project**
```javascript
import html from 'common-tags/lib/html' // Optional template literal tag function to remove spaces inside HTML-like string
import INLINE_SCRIPT from 'inline!./src/assets/inline.js' // Note the extension is important here (not to be missed)
import INLINE_SVG from 'inline!./src/assets/sample.svg'
...
return html`
...
${INLINE_SCRIPT}
${INLINE_SVG}
...
`
...
```
This [rollup-plugin-inline-code](https://github.com/denisstasyev/rollup-plugin-inline-code) replaces `INLINE_SCRIPT` and `INLINE_SVG` with file contents, success :confetti_ball:
## TypeScript syntax highlighting
You can simply fix the code highlighting when importing into Typescript files. To do this, you need to declare a global module
**src/typings/global.d.ts**
```typescript
declare module 'inline!*' {
const inlineCode: string
export default inlineCode
}
```
Then you need to modify **tsconfig.json** to set global typings path with the `typeRoots` option
**tsconfig.json**
```json
{
"compilerOptions": {
...
"typeRoots": ["node_modules/@types", "src/typings/global.d.ts"]
...
},
...
}
```
That's it, restart your TypeScript server and see no import errors :tada:
P.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
## API
### Parameters
| Name | Type | Default | Description |
| ------ | ------ | --------- | ----------------------------------- |
| prefix | string | `inline!` | Custom prefix to detect inline code |
To use parameters, pass them in **rollup.config.js** as shown below
**rollup.config.js**
```javascript
...
plugins: [inlineCode({ prefix: 'myCustomPrefix!' })]
...
```
## License
MIT © [Denis Stasyev](https://github.com/denisstasyev)