{"id":16176682,"url":"https://github.com/ipseonet/rsbuild-plugin-marko","last_synced_at":"2025-10-24T08:31:25.672Z","repository":{"id":257819786,"uuid":"868655718","full_name":"ipseonet/rsbuild-plugin-marko","owner":"ipseonet","description":"Extended plugin for using Marko with Rsbuild.","archived":false,"fork":false,"pushed_at":"2024-10-14T02:19:02.000Z","size":42540,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T09:17:55.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ipseonet.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-06T23:37:46.000Z","updated_at":"2024-10-14T02:19:06.000Z","dependencies_parsed_at":"2024-10-10T05:33:48.234Z","dependency_job_id":"4ed83933-2b29-42aa-8847-8efe5f9dd10f","html_url":"https://github.com/ipseonet/rsbuild-plugin-marko","commit_stats":null,"previous_names":["ipseonet/rsbuild-plugin-marko"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipseonet%2Frsbuild-plugin-marko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipseonet%2Frsbuild-plugin-marko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipseonet%2Frsbuild-plugin-marko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipseonet%2Frsbuild-plugin-marko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipseonet","download_url":"https://codeload.github.com/ipseonet/rsbuild-plugin-marko/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237937879,"owners_count":19390546,"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-10-10T05:01:24.373Z","updated_at":"2025-10-24T08:31:20.330Z","avatar_url":"https://github.com/ipseonet.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Rsbuild Plugins"],"readme":"# rsbuild-plugin-marko (beta)\n\nAn Rsbuild plugin to provide support for the Marko template engine.  \nThe @marko/webpack/plugin did work with Rsbuild because of the specific requirements Rsbuild has for plugins and left the use of .server or .browser with the webpack plugin as undefined.\\\nThis plugin is build using Rspack and incorporates the @marko/webpack/loader. Other built-in functions include babel and automatically using the plugin for server/browser so it only has to be included once. There is functionality for SSR and the plugin loads both server and browser versions of the plugin.\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/rsbuild-plugin-example\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/rsbuild-plugin-example?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/rsbuild-plugin-example?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/rsbuild-plugin-example.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\nInstall Dependencies:\n```\nnpm install -D\n@babel/plugin-transform-runtime\n@babel/preset-env\n@marko/webpack\n@rsbuild/core\n```\nInstall:\n\n```\nnpm add rsbuild-plugin-marko -D\n```\n\n## MarkoPluginOptions\nThe runtimeID is handled automatically, and the isBrowser is more so courtesy and peace of mind. It is also handled automatically. isSSR removed for both plugins loading when environments are set.\n```\nMarkoPluginOptions {\n  runtimeId?: string;\n  isBrowser?: boolean;\n}\n```\n\nAdd plugin to your `rsbuild.config.ts`:\n\n```ts\n// rsbuild.config.ts\nimport { defineConfig } from '@rsbuild/core';\nimport { pluginMarko } from 'rsbuild-plugin-marko';\n\nexport default defineConfig({\n  plugins: [\n    pluginMarko(),\n  ],\n});\n\n```\n\nConfigurations typically needed in Webpack are baked in:\n```\n{\n        test: /\\.marko$/,\n        type: 'javascript/auto',\n        use: [\n          {\n            loader: join(__dirname, '../node_modules', '@marko/webpack/loader'),\n            options: {\n              babelConfig: {\n                presets: [\n                  [\n                    '@babel/preset-env',\n                    {\n                      targets: isBrowser ? 'defaults' : { node: 'current' },\n                    },\n                  ],\n                ],\n                plugins: [\n                  [\n                    '@babel/plugin-transform-runtime',\n                    {\n                      regenerator: true,\n                    },\n                  ],\n                ],\n              },\n              virtualFiles: true,\n              debug: true,\n              compiler: {\n                debug: true,\n              },\n            },\n          },\n        ],\n      },\n      {\n        test: /\\.(jpg|jpeg|gif|png|svg)$/,\n        type: 'asset',\n      },\n```\nIf it turns out to be the case that leaving these options out for users to add different one, please leave input as an issue.\n\n## Using Marko Templates\n\nAfter the plugin registration is completed, Rsbuild will automatically parse template files with the .marko extension and compile them using the Marko template engine.\n\nExample: first create a src/index.marko file, and include that file as your source.entry or import your marko components into your source.entry page:\n(the template marko file can be in any directory as long as source.entry properly imports them. The html.template is typically used for SSR.)\n\n* Note: Only tested success with .js/.mjs/.ts as source.entry files and the use of .marko as components only.\n\n### WEB ONLY (Standard)\n```\nimport { defineConfig } from '@rsbuild/core';\nimport { pluginMarko } from '../src';\n\nexport default defineConfig({\n  plugins: [\n    pluginMarko(),\n  ],\n  source: {\n     entry: {\n       index: {\n         import: ['./src/index.mjs']\n       }\n     }\n   }\n}\n```\nThe important thing here is the required source.entry format. There can be multiple entries included alongside index, but each has to have an import: ['/path/to/entry']\n\nSuppose there is this code in button.marko:\n```\nclass {\n    sayHi() {\n        alert(\"Hi! Your Marko Button works!\");\n    }\n}\n\n\u003cbutton on-click(\"sayHi\") id=\"first\"\u003eClick me!\u003c/button\u003e\n```\n\nAfter using the Marko plugin, use the Marko syntax in the index.marko template and reference it as follows:\n\n```\n\u003c!-- Input --\u003e\nimport Button from './button.marko';\n\u003ch1 id=\"content\"\u003eHello, Marko!\u003c/h1\u003e\n  \u003cdiv\u003eSuccess! Marko loaded! Click the button below:\u003c/div\u003e\n  \u003cButton label=\"Click me!\" /\u003e\n\n\u003c!-- Output --\u003e\nHello Marko!\nSuccess! Marko loaded! Click the button below:\n[Click me!]\n```\n### Playground is set up for testing purposes:\n```\ncd playground\nnpm install\nnpm run dev\n```\n\n### Jesus Christ is Lord, Hallelujah!\n#### License\n\n[MIT](./LICENSE).**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipseonet%2Frsbuild-plugin-marko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipseonet%2Frsbuild-plugin-marko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipseonet%2Frsbuild-plugin-marko/lists"}