Best viewed on desktop Mobile Friendly tutorial coming soon!

Consuming Your Package

Different project. This one is an ordinary marko-run app that has never heard of your library — except for one line in its package.json:

"marko-fancy": "file:./marko-fancy-0.0.1.tgz"

That .tgz is the tarball your build produced, committed into this project so you can install it without a registry. It’s exactly what npm publish would have uploaded, so everything you’re about to see is what a real consumer sees.

  1. Add the tag to the page:

    <fancy-badge kind="sale">Half price today</fancy-badge>
  2. Look at the preview.

Notice what you didn’t do: import it. No path, no import statement, nothing at the top of the file. Marko’s compiler walked this app’s dependencies, found marko-fancy, read its marko.json, and learned that <fancy-badge> lives at ./dist/tags. In part four, tags were discovered from your own src/tags folder. That same mechanism reaches into installed packages, which is why a Marko library needs no import ceremony at all.

And the types came with it. Try breaking it:

<fancy-badge kind="bogus">Half price today</fancy-badge>

Run pnpm check:

Type '"bogus"' is not assignable to type '"new" | "sale"'.

That union isn’t in this project. It’s in the index.d.marko your build generated two lessons ago, now sitting in node_modules. The declaration twin travelled inside the tarball, got installed, and is now type-checking someone else’s page. Put kind="sale" back and pnpm check goes quiet.

You should see a crimson SALE badge, and pnpm check clean. Your library works in a project that only ever saw the tarball. Next: the two lines that decide whether it works for everyone else.

Powered by WebContainers Built with TutorialKit Built with ❤️ by defunkt-dev
Files
Preparing Environment
  • Installing dependencies
  • Starting dev server