- Notifications
You must be signed in to change notification settings - Fork2
Rollup plugin to inline JavaScript code with TypeScript support based on prefix
License
denisstasyev/rollup-plugin-inline-code
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Rollup plugin for inline scripts into code
This Rollup plugin is likeraw-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 👍
npm i rollup-plugin-inline-code
Start by updating yourrollup.config.js file
rollup.config.js
importinlineCodefrom'rollup-plugin-inline-code'exportdefault{input: ...,output: ...,plugins:[inlineCode()],}
Then modify the import with the prefixinline!
Any JavaScript or TypeScript file of your project
importhtmlfrom'common-tags/lib/html'// Optional template literal tag function to remove spaces inside HTML-like stringimportINLINE_SCRIPTfrom'inline!./src/assets/inline.js'// Note the extension is important here (not to be missed)importINLINE_SVGfrom'inline!./src/assets/sample.svg'...returnhtml`<!DOCTYPE html><htmllang="en"><head> ...</head><body><!-- Inline Script --><script>${INLINE_SCRIPT}</script><!-- Inline SVG -->${INLINE_SVG} ...</body></html>`...
Thisrollup-plugin-inline-code replacesINLINE_SCRIPT andINLINE_SVG with file contents, success 🎊
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!*'{constinlineCode:stringexportdefaultinlineCode}
Then you need to modifytsconfig.json to set global typings path with thetypeRoots 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 typeTypeScript: Restart TS server with any open TypeScript file
| Name | Type | Default | Description |
|---|---|---|---|
| prefix | string | inline! | Custom prefix to detect inline code |
To use parameters, pass them inrollup.config.js as shown below
rollup.config.js
...plugins:[inlineCode({prefix:'myCustomPrefix!'})]...
MIT ©Denis Stasyev
About
Rollup plugin to inline JavaScript code with TypeScript support based on prefix
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.