Rocket
On this page

Author Modules#

Rocket exposes several modules from @rocket/js. Most Site Authors only need a small set of them. Use this page to choose imports for Pages, layouts, component registration, and deployment config without reaching into Rocket's runtime internals.

Page and layout imports#

Use these from Markdown Page js server blocks, JavaScript Pages, or layout modules:

ImportUse it for
@rocket/js/types.jsJSDoc types for config, Pages, components, and layouts
@rocket/js/layout.jsRocket's default Markdown layout
@rocket/js/layout-helper.jsThe document helper for custom layouts
@rocket/js/layouts/atlasDoc.jsThe atlas docs layout and its component map
@rocket/js/layouts/atlasHero.jsThe atlas hero layout and its component map
@rocket/js/layouts/atlasNotFound.jsThe atlas 404 layout and its component map
@rocket/js/components/web-awesome.jsWeb Awesome Registered Component map for custom layouts
@rocket/js/resolve.jsBrowser-facing URLs for source assets and package assets
@rocket/js/ssr.jsRender Lit templates from JavaScript Pages

Page Collections do not need an extra runtime import. Use the pageData.pages Page Registry Query and pageData.pagination object that Rocket passes into JavaScript Pages and layouts. Use @rocket/js/types.js only when you want JSDoc types such as PageCollectionEntry, PagePagination, or PageRegistryQueryOptions.

Common page and layout imports look like this:

import { html } from 'lit';
import { ssrRender } from '@rocket/js/ssr.js';
import { resolve } from '@rocket/js/resolve.js';
import { atlasDocLayout } from '@rocket/js/layouts/atlasDoc.js';

Config and deployment imports#

Use the Netlify adapter from rocket-config.js when the site has server-rendered Pages:

import { netlify } from '@rocket/js/adapters/netlify.js';

export default {
  includeGlobs: ['src/pages/**/*.rocket.{md,js}'],
  adapter: netlify(),
};

Static-only sites do not need an adapter import.

Component registration imports#

Registered Component file values are module specifiers or absolute file URLs:

const cardFile = new URL('../components/AcmeCard.js', import.meta.url).href;

export const components = {
  'acme-card': {
    file: cardFile,
    className: 'AcmeCard',
    loading: 'server',
  },
};

Do not import the component class into the Page just to register it. Rocket imports the component module from the file value.

@rocket/js/menus.js exports menu custom element classes for advanced custom layouts:

import { RocketMenu, RocketToc } from '@rocket/js/menus.js';

Most Pages should use atlasDocComponents instead of defining these classes manually. If a custom layout registers them itself, keep tag names and PageData properties consistent with the menu components it renders.

Imports to avoid in normal site code#

These modules are exported because Rocket's own runtime, tests, adapters, or low-level extensions need them, but ordinary Pages and layouts should not usually import them:

Import familyPrefer instead
@rocket/js/PageData.jsUse the pageData object Rocket passes in
@rocket/js/page-runtime.jsLet the CLI, dev server, build, or adapter render
@rocket/js/pages.jsConfigure discovery with includeGlobs
@rocket/js/components.jsExport a Page components map
@rocket/js/component-hydration.jsChoose server, client, or hydrate:*
@rocket/js/hydration/hydrationLoader.jsLet Rocket emit hydration code
@rocket/js/markdownHook.jsUse .rocket.md Pages through the CLI
@rocket/js/transform.jsUse Markdown Pages instead of compiling manually
@rocket/js/wds-plugin.jsUse rocket start and adjustDevServerConfig
@rocket/js/loaded-page-module.jsLet Page Module Loaders normalize Page modules

If a project needs one of these directly, it is probably building a custom integration rather than ordinary site content.