{"id":13775101,"url":"https://github.com/trofima/rollup-plugin-ejs","last_synced_at":"2025-04-30T04:31:49.283Z","repository":{"id":20941809,"uuid":"91057910","full_name":"trofima/rollup-plugin-ejs","owner":"trofima","description":"ejs loader plugin for rollup.js","archived":false,"fork":false,"pushed_at":"2024-12-23T13:38:21.000Z","size":281,"stargazers_count":8,"open_issues_count":0,"forks_count":6,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-18T02:05:11.143Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/trofima.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-12T06:16:56.000Z","updated_at":"2024-12-23T13:38:25.000Z","dependencies_parsed_at":"2024-01-13T12:52:48.586Z","dependency_job_id":"9ff5ab4d-c83a-4a85-853a-80672af0aa9a","html_url":"https://github.com/trofima/rollup-plugin-ejs","commit_stats":{"total_commits":39,"total_committers":3,"mean_commits":13.0,"dds":"0.15384615384615385","last_synced_commit":"c7366bf2d1ee566fceefe700a27a78db7e463d27"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trofima%2Frollup-plugin-ejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trofima%2Frollup-plugin-ejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trofima%2Frollup-plugin-ejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trofima%2Frollup-plugin-ejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trofima","download_url":"https://codeload.github.com/trofima/rollup-plugin-ejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251642922,"owners_count":21620393,"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":[],"created_at":"2024-08-03T17:01:33.935Z","updated_at":"2025-04-30T04:31:49.276Z","avatar_url":"https://github.com/trofima.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Templating"],"readme":"# rollup-plugin-ejs\n.ejs(embedded javascript) templates loader plugin for rollup.js\n\nSupports loading of any files with proper ejs content.\n\n\u003e **Breaking changes in v4**\u003cbr\u003e\n\u003e* `sass` and `html-minifier` moved to `peerDependencies`\n\u003e* `loadStyles` option renamed to `inlineStyles`\n\n## Installation\n```\nnpm install rollup-plugin-ejs --save\n```\n\n\u003e **NOTE:**\u003cbr\u003e\nThis plugin depends on `sass` module for supporting `inlineStyles` option and `html-minifier` module for supporting `render.minifierOptions` (see `peerDependencies` in `package.json`).\nSo if you are going to use those options, don't forget to install relevant dependencies.\nOtherwise you can ignore npm installation warning about missing peer dependencies for this module.\n\n\u003e **NOTE:**\u003cbr\u003e\nIf you are bundling code with `rollup` in `es` format, keep in mind that since this plugin dynamically imports peer dependencies, your node version should support `import()` feature (node 13.2.0+).\n\n## Usage\nConstruction\n```javascript\nimport tpl from './tpl.ejs';\n```\nBy default will return you function the execution result of [ejs.compile](https://github.com/mde/ejs#usage) function.\nThis function should be executed with data to return parsed html string.\nBy default data goes to the 'locals' variable of the template (see following usage example).\nYou can change ejs compiler [options](https://github.com/mde/ejs#options) when setting up the ejs rollup plugin.\n\nIf you'll pass `render` option with `data` to the plugin, it will return you compiled html.\n\nrollup.config.js\n```javascript\nimport { rollup } from 'rollup';\nimport ejs from 'rollup-plugin-ejs';\n\nrollup({\n  entry: 'main.js',\n  plugins: [\n    ejs({\n      include: ['**/*.ejs', '**/*.html'], // optional, '**/*.ejs' by default\n      exclude: ['**/index.html'], // optional, undefined by default\n      compilerOptions: {client: true}, // optional, any options supported by ejs compiler\n      render: { //optional, if passed, html string will be returned instead of template render function\n        data: {...}, //required, data to be rendered to html\n        minifierOptions: {...} //optional, [html-minifier](https://github.com/kangax/html-minifier) options, won't minify by default, if not passed\n      },\n    }),\n  ],\n});\n```\n\nsomeModule.js\n```javascript\nimport tpl from './tpl.ejs';\n\nconst domNode = document.createElement('div');\n\ndomNode.innerHTML = tpl({text: 'Hello World'});\n\ndocument.body.appendChild(domNode);\n```\n\ntpl.ejs\n```html\n\u003cp\u003e\u003c%= locals.text %\u003e\u003c/p\u003e\n```\n\n## Advanced options\n\n### inlineStyles: Boolean\n\nInlines content of files connected by `\u003clink rel=\"stylesheet\u003e` tags to `\u003cstyle\u003e...\u003c/style\u003e` tags in a template.\u003cbr\u003e\n\nIt might be useful first of all for those are using [webcomponents.js](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs).\nBy the webcomponents spec v1 you can use ```\u003clink rel=\"stylesheet\" href=\"...\"\u003e``` tags in your shadow dom to load styles. \nBut unfortunately not all browsers support this.\n[ShadyCSS](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) doesn't help here, because it works only for `\u003cstyle\u003e...\u003c/style\u003e` tags in your shadow dom.\nSo for ShadyCSS to process your styles loaded by link tags you have to replace ```\u003clink\u003e``` tags with ```\u003cstyle\u003e``` tags containing css rules from linked css file.\nTo achieve this on loading a template ejs/html file you can use `inlineStyles` option:\n\n\u003e**NOTE**\u003cbr\u003e\nStarting from v2 you can also use link to ```.scss``` files instead of ```.css``` directly! ```.scss``` will be compiled on the fly and appended to the ```\u003cstyle\u003e``` as regular css! So you don't need to compile sass separately anymore.\n\nrollup.config.js\n```javascript\nimport { rollup } from 'rollup';\nimport ejs from 'rollup-plugin-ejs';\n\nrollup({\n  entry: 'main.js',\n    plugins: [\n      ejs({\n        include: ['**/*.ejs', '**/*.html'],\n        inlineStyles: true, // false by default\n      }),\n    ],\n});\n```\n\ntpl.ejs\n```html\n\u003clink rel=\"stylesheet\" href=\"./style.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"./style1.scss\"\u003e\n\u003ch1\u003eMy custom component\u003c/h1\u003e\n\u003cslot\u003e\u003c/slot\u003e\n```\n\nstyle.css\n```css\n:host {\n  background: red;\n  display: block;\n}\n```\n\nstyle1.scss\n```scss\n$color-link: #000000;\n\na {\n  cursor: auto;\n  color: $color-link;\n}\n```\n\nThe resulted compiled template string will look like this:\n\n```html\n\u003cstyle\u003e\n  :host {\n    background: red;\n    display: block;\n  }\n\u003c/style\u003e\n\u003cstyle\u003e\n  a {\n    cursor: auto;\n    color: #000000;\n  }\n\u003c/style\u003e\n\n\u003ch1\u003eMy custom component\u003c/h1\u003e\n\u003cslot\u003e\u003c/slot\u003e\n```\n\nNow ShadyCSS is able to process the html content in a right way.\n\nIt will (should at least ;) work for multiple ```\u003clink\u003e``` tags even if you mix ```.css``` and ```.scss``` files. \nAnd also it works even for ```\u003ctemplate\u003e``` tags containing ```\u003clink\u003e``` tags.\n\n\nEnjoy. And fill free to pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrofima%2Frollup-plugin-ejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrofima%2Frollup-plugin-ejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrofima%2Frollup-plugin-ejs/lists"}