{"id":20083653,"url":"https://github.com/marko-js/rollup","last_synced_at":"2025-05-06T01:31:31.344Z","repository":{"id":40284402,"uuid":"207680384","full_name":"marko-js/rollup","owner":"marko-js","description":"A Marko plugin for Rollup.","archived":false,"fork":false,"pushed_at":"2023-05-19T18:56:15.000Z","size":2339,"stargazers_count":16,"open_issues_count":14,"forks_count":3,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-28T12:14:07.312Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/marko-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-10T23:21:35.000Z","updated_at":"2024-09-06T15:43:28.000Z","dependencies_parsed_at":"2023-02-06T11:31:44.878Z","dependency_job_id":null,"html_url":"https://github.com/marko-js/rollup","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frollup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frollup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frollup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frollup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marko-js","download_url":"https://codeload.github.com/marko-js/rollup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224479523,"owners_count":17318290,"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-11-13T15:48:18.380Z","updated_at":"2024-11-13T15:48:18.891Z","avatar_url":"https://github.com/marko-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003c!-- Logo --\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/4985201/64657906-4d0cc000-d3ea-11e9-93ba-a46c008f2b22.png\" height=\"118\"/\u003e\n  \u003cbr/\u003e\n  @marko/rollup\n\t\u003cbr/\u003e\n\n  \u003c!-- Language --\u003e\n  \u003ca href=\"http://typescriptlang.org\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%3C%2F%3E-typescript-blue.svg\" alt=\"TypeScript\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Format --\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" alt=\"Styled with prettier\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- CI --\u003e\n  \u003ca href=\"https://github.com/marko-js/rollup/actions/workflows/ci.yml\"\u003e\n    \u003cimg src=\"https://github.com/marko-js/rollup/actions/workflows/ci.yml/badge.svg\" alt=\"Build status\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Coverage --\u003e\n  \u003ca href=\"https://coveralls.io/github/marko-js/rollup\"\u003e\n    \u003cimg src=\"https://img.shields.io/coveralls/marko-js/rollup.svg\" alt=\"Test Coverage\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- NPM Version --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/rollup\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@marko/rollup.svg\" alt=\"NPM Version\"/\u003e\n  \u003c/a\u003e\n  \u003c!-- Downloads --\u003e\n  \u003ca href=\"https://npmjs.org/package/@marko/rollup\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/@marko/rollup.svg\" alt=\"Downloads\"/\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\nA Marko plugin for Rollup.\n\n# Features\n\n1. Compiles Marko templates for the server and browser.\n2. Externalizes styles to be consumed by other tools (eg: [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss#readme)).\n3. Can calculate browser dependencies for a page template and send only templates with components to the browser.\n4. Can output a bundle which automatically initializes Marko components.\n5. Can create a [_linked_](#linked-config) build for both the server and browser with automated asset management.\n\n**Note: The Marko runtime is authored in commonjs, this means the `@rollup/plugin-commonjs` is required!**\n\n# Installation\n\n```console\nnpm install @marko/rollup\n```\n\n# Basic example config\n\n```javascript\nimport nodeResolve from \"@rollup/plugin-node-resolve\";\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport marko from \"@marko/rollup\";\n\nexport default {\n  ...,\n  plugins: [\n    marko.browser(),\n    nodeResolve({\n      browser: true,\n      extensions: [\".js\", \".marko\"]\n    }),\n    // NOTE: The Marko runtime uses commonjs so this plugin is also required.\n    commonjs({\n      extensions: [\".js\", \".marko\"]\n    }),\n    // If using `style` blocks with Marko you must use an appropriate plugin.\n    postcss({\n      external: true\n    })\n  ]\n};\n```\n\nLikewise, if bundling the components for the server use `marko.server()` as the plugin.\n\n# Linked config\n\nIf you use _both_ the `server` and `browser` plugins (in a [multi rollup config setup](https://rollupjs.org/guide/en/#configuration-files:~:text=export%20an%20array)) `@marko/rollup` will go into a _linked_ mode.\nIn the linked mode you will have access to the [`\u003crollup\u003e` tag](#rollup-tag) on the server, and the browser config\nwill automatically have the [`input`](https://rollupjs.org/guide/en/#input) option set.\n\n```javascript\nexport default [{\n  // Config object for bundling server assets.\n  input: \"src/your-server-entry.js\",\n  plugins: [\n    marko.server()\n    ...\n  ]\n}, {\n  // Config object for bundling browser assets.\n  plugins: [\n    marko.browser()\n    ...\n  ]\n}];\n```\n\n## `\u003crollup\u003e` tag\n\nIn a [linked setup](#linked-config) you have access to the `\u003crollup\u003e` tag which will provide two [tag parameters](https://markojs.com/docs/syntax/#parameters) that allow you to write out the asset links for your server rendered app.\n\nThe first parameter `entry` is the generated `input` name that the server plugin gave to the browser compiler.\nYou can use it to find the corresponding entry chunk from rollups build.\n\nThe second parameter `output` is an array of `AssetInfo | ChunkInfo` objects with most of the same properties returned from rollup's [`generateBundle` hook](https://rollupjs.org/guide/en/#generatebundle). Some properties have been stripped, notably `code` and `map` since they would be too large to inline directly. A `size` property is also available for all chunks to allow you to be able to filter out empty chunks, or inline chunks of certain size.\n\n```marko\n\u003chead\u003e\n  \u003crollup|entry, output|\u003e\n    $ const entryChunk = output.find(chunk =\u003e chunk.name === entry);\n\n    \u003cif(entryChunk.size /* skip scripts all together if empty js file */)\u003e\n      \u003cfor|fileName| of=entryChunk.imports\u003e\n        \u003clink rel=\"modulepreload\" href=fileName/\u003e\n      \u003c/for\u003e\n\n      \u003cscript async type=\"module\" src=entryChunk.fileName/\u003e\n    \u003c/if\u003e\n  \u003c/rollup\u003e\n\u003c/head\u003e\n```\n\nUltimately it is up to you to map the chunk data (sometimes referred to as a manifest) into the `\u003clink\u003e`'s and `\u003cscript\u003e`'s rendered by your application.\n\nIf your rollup browser config contains multiple `output` options, or you have multiple browser configs, all of the `chunks` for each `output` are passed into the `\u003crollup\u003e` tag.\n\nFor example if you have an `esm` and `iife` build:\n\n```javascript\n{\n  plugins: [\n    marko.browser()\n    ...\n  ],\n  output: [\n    { dir: 'dist/iife', format: 'iife' },\n    { dir: 'dist/esm', format: 'esm' }\n  ]\n}\n```\n\nwe could access the assets from both builds:\n\n```marko\n\u003chead\u003e\n  \u003crollup|entry, iifeOutput, esmOutput|\u003e\n    $ const iifeEntryChunk = iifeOutput.find(chunk =\u003e chunk.name === entry);\n    $ const esmEntryChunk = esmOutput.find(chunk =\u003e chunk.name === entry);\n\n    \u003cscript async type=\"module\" src=esmEntryChunk.fileName/\u003e\n    \u003cscript nomodule src=iifeEntryChunk.fileName\u003e\u003c/script\u003e\n  \u003c/rollup\u003e\n\u003c/head\u003e\n```\n\nand _boom_ you now have a [`module/nomodule` setup](https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/).\n\n# Top level components\n\nMarko was designed to send as little JavaScript to the browser as possible. One of the ways we do this is by automatically determining which templates in your app should be shipped to the browser. When rendering a template on the server, it is only necessary to bundle the styles and interactive components rendered by that template.\n\nTo send the minimal amount of Marko templates to the browser you can provide a Marko template directly as the `input`.\nThis will also automatically invoke code to initialize the components in the browser, so there is no need to call\n`template.render` yourself in the browser.\n\n\u003e Note: if you are using _linked_ plugins then the server plugin will automatically tell the browser compiler which Marko templates to load.\n\n```js\nexport default {\n  input: \"./my-marko-page.marko\",\n  plugins: [\n    marko.browser(),\n    ...\n  ],\n  ...\n}\n```\n\n## Options\n\nBoth the `server` and `browser` plugins can receive the same options.\n\n### options.babelConfig\n\nYou can manually override the Babel configuration used by passing a `babelConfig` object to the `@marko/rollup` plugin. By default Babels regular [config file resolution](https://babeljs.io/docs/en/config-files) will be used.\n\n```javascript\nmarko.browser({\n  babelConfig: {\n    presets: [\"@babel/preset-env\"],\n  },\n});\n```\n\n### options.runtimeId\n\nIn some cases you may want to embed multiple isolated copies of Marko on the page. Since Marko relies on some `window` properties to initialize this can cause issues. For example, by default Marko will read the server rendered hydration code from `window.$components`. In Marko you can change these `window` properties by rendering with `{ $global: { runtimeId: \"MY_MARKO_RUNTIME_ID\" } }` as input on the server side.\n\nThis plugin exposes a `runtimeId` option produces output that automatically sets `$global.runtimeId` on the server side and initializes properly in the browser.\n\n```js\nconst runtimeId = \"MY_MARKO_RUNTIME_ID\";\n// Make sure the `runtimeId` is the same across all of your plugins!\nmarko.server({ runtimeId });\nmarko.browser({ runtimeId });\n```\n\n### options.serialize\n\nThis option is only available for the `browser` plugin. It allows you to transform the list of chunks serialzed in a [_linked config_](#linked-config) to include whatever you like.\nFor example if you _did_ want to include the `code` property from the rollup chunk, to say inline some content, the following would work:\n\n```js\nmarko.browser({\n  serialize(output) {\n    return output.map((chunk) =\u003e\n      chunk.type === \"asset\"\n        ? {\n            type: \"asset\",\n            fileName: chunk.fileName,\n          }\n        : {\n            type: \"chunk\",\n            name: chunk.name,\n            isEntry: chunk.isEntry,\n            fileName: chunk.fileName,\n            code:\n              chunk.code.replace(/^\\s+$/, \"\").length \u003c 1024\n                ? chunk.code\n                : undefined, // only inline small code chunks\n          }\n    );\n  },\n});\n```\n\n## Code of Conduct\n\nThis project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Frollup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarko-js%2Frollup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Frollup/lists"}