denisstasyev/rollup-plugin-inline-code

README

rollup-plugin-inline-code

Rollup plugin for inline scripts into code

🚀 Features

This Rollup plugin is like raw-loader plugin for Webpack

Easy to use (simple configuration)
Fully customizable: you can adjust it for yourself 🦖
Suitable for inline JavaScript, TypeScript, SVG files (and any assets)
Typescript code highlighting works 🔥
Tests with Node.js 12, 14, 16 👍

Install

npm i rollup-plugin-inline-code

Usage

Start by updating your rollup.config.js file

rollup.config.js

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

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`
  <!DOCTYPE html>
  <html lang="en">
    <head>
      ...
    </head>
    <body>
      <!-- Inline Script -->
      <script>
        ${INLINE_SCRIPT}
      </script>

      <!-- Inline SVG -->
      ${INLINE_SVG}

      ...
    </body>
  </html>
`
...

This rollup-plugin-inline-code replaces INLINE_SCRIPT and INLINE_SVG with file contents, success 🎊

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

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

{
  "compilerOptions": {
    ...
    "typeRoots": ["node_modules/@types", "src/typings/global.d.ts"]
	...
  },
  ...
}

That's it, restart your TypeScript server and see no import errors 🎉

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

...
plugins: [inlineCode({ prefix: 'myCustomPrefix!' })]
...

License

MIT © Denis Stasyev

README

rollup-plugin-inline-code

Rollup plugin for inline scripts into code

🚀 Features

This Rollup plugin is like raw-loader plugin for Webpack

Easy to use (simple configuration)
Fully customizable: you can adjust it for yourself 🦖
Suitable for inline JavaScript, TypeScript, SVG files (and any assets)
Typescript code highlighting works 🔥
Tests with Node.js 12, 14, 16 👍

Install

npm i rollup-plugin-inline-code

Usage

Start by updating your rollup.config.js file

rollup.config.js

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

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`
  <!DOCTYPE html>
  <html lang="en">
    <head>
      ...
    </head>
    <body>
      <!-- Inline Script -->
      <script>
        ${INLINE_SCRIPT}
      </script>

      <!-- Inline SVG -->
      ${INLINE_SVG}

      ...
    </body>
  </html>
`
...

This rollup-plugin-inline-code replaces INLINE_SCRIPT and INLINE_SVG with file contents, success 🎊

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

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

{
  "compilerOptions": {
    ...
    "typeRoots": ["node_modules/@types", "src/typings/global.d.ts"]
	...
  },
  ...
}

That's it, restart your TypeScript server and see no import errors 🎉

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

...
plugins: [inlineCode({ prefix: 'myCustomPrefix!' })]
...

gem-hunter