The Shape of a Tag Library

Everything so far has been your app. This chapter is about giving your tags to somebody else — a package they install and use without ever seeing this code.

The project on the left is not an app. There’s no src/routes, no dev server, and nothing to preview: a library has no pages. What it has is four small files, and each one earns its place.

marko.json is one line. { "exports": "./dist/tags" }. That’s the whole file. It tells any consumer’s compiler where this package’s tags live once installed — and it points at dist, the built output, not src.

src/tags/ is the public surface. Every folder here becomes a tag a consumer can use by name. fancy-badge becomes <fancy-badge> in someone else’s page, with no import. That’s the same discovery you met in part four, seen from the other end.

package.json ships dist, never src. The files field is the allowlist. And sideEffects: ["**/*.marko"] — remember it; the fourth lesson explains why that one line is load-bearing.

tsconfig.tags.json is the build config, and the next lesson is about what it does.

1. Add a second tag. Right-click the src/tags folder in the file tree, create a folder called sale-ribbon, and inside it a file called index.marko:

   export interface Input {
     percent: number;
   }
   
   <div class="ribbon">-${input.percent}%</div>

2. Run pnpm build in the terminal.

3. Run ls dist/tags. Two folders. You just changed what consumers of this package can type.

You should now have two tags in dist/tags. Next: what actually ends up in there, and why it isn’t what you wrote.