Nearsighted Prank Master

    rollup-plugin-inline-code
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.7 • Public • Published

    rollup-plugin-inline-code

    NPM version NPM downloads Svelte v3 Coverage semantic-release

    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

    Install

    npm i rollup-plugin-inline-code

    DownloadsWeekly Downloads

    5

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    7.51 kB

    Total Files

    5

    Last publish

    Collaborators

    • denisstasyev