@marko/vite
A Marko plugin for Vite.
Installation
npm install @marko/vite
Example config
import { defineConfig } from "vite";
import marko from "@marko/vite";
export default defineConfig({
plugins: [marko()],
});
Linked Mode
By default this plugin operates in linked mode (you can disabled this by passing linked: false as an option). In linked mode the plugin automatically discovers all of the entry .marko files while compiling the server, and tells Vite which modules to load in the browser.
With this you do not create .html files for Vite, it's Marko all the way down! Scripts, styles and other content that would have been injected into the .html files is instead automatically injected into your .marko templates.
In this mode you must use the Vite SSR API.
Here's an example using express.
import { createServer } from "vite";
const app = express();
let loadTemplate;
if (process.env.NODE_ENV === "production") {
// Use Vite's built asset in prod mode.
loadTemplate = () => import("./dist");
} else {
// Hookup the vite dev server.
const vite = await createViteServer({
server: { middlewareMode: true }
});
app.use(vite.middlewares);
loadTemplate = () => vite.ssrLoadModule("./template.marko");
}
app.get("/", async (req, res) => {
const template = (await loadTemplate()).default;
// When the template is loaded, it will automaticall have `vite` assets inlined.
template.render({ hello: "world" }, res);
);
app.listen(3000);
For a more real world setup check out our vite express example app.
Options
options.babelConfig
You can manually override Marko's Babel configuration by passing a babelConfig object to the @marko/vite plugin. By default Babel's regular config file resolution will be used.
marko({
babelConfig: {
presets: ["@babel/preset-env"],
},
});
options.runtimeId
In 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.
This plugin exposes a runtimeId option produces output that automatically sets $global.runtimeId on the server side and initializes properly in the browser.
marko({ runtimeId: "MY_MARKO_RUNTIME_ID" });
options.linked
Set this to false to opt out of linked mode. When this is false, the plugin will only handle resolving and transforming .marko files.
Code of Conduct
This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.
10 Aug 2, 2022
29 Oct 13, 2022
49 Dec 22, 2022
137 Dec 17, 2022
580 Jan 7, 2023
54 Nov 12, 2022
28 Dec 22, 2022
17 Aug 18, 2022
7 Dec 15, 2022
13 Nov 13, 2022
61 Dec 23, 2022
84 Nov 28, 2022
3 Mar 26, 2022
95 Dec 15, 2022
6 Jun 25, 2022
8 Nov 11, 2022
9 Jul 16, 2022
31 Dec 13, 2022
90 Dec 15, 2022