ImportMap Component

The ImportMap component renders a <script type="importmap"> tag that maps bare module specifiers (like @wordpress/interactivity) to proxied URLs. This is required for WordPress blocks that use viewScriptModule and the Interactivity API.

ImportMap is typically used via WPHead which renders it automatically when importMap is provided:

<WPHead
  scripts={scripts}
  globalStyles={globalStyles}
  importMap={importMap}
  pathname={uri}
/>

To use standalone:

import { ImportMap } from '@axistaylor/nextpress';

<ImportMap imports={importMap} instance="default" pathname={uri} />

interface WPImport {
  name: string;  // Bare specifier, e.g. "@wordpress/interactivity"
  path: string;  // Relative URL, e.g. "/wp-includes/js/dist/script-modules/interactivity/debug.js"
}

Import map entries come from the importMap field on UriAssets:

query ($uri: String!) {
  assetsByUri(uri: $uri) {
    importMap(scheme: RELATIVE) {
      name
      path
    }
  }
}

The scheme argument controls URL format:

• FULL — Absolute WordPress URLs
• RELATIVE — Relative paths (recommended — transformAssetUrl handles proxy routing)

1. The WP plugin's Uri_Assets model calls NextPress_Script_Modules::get_enqueued_import_map() to read the private WP_Script_Modules::get_import_map() data
2. The GraphQL resolver strips the site URL prefix and returns relative paths
3. The ImportMap component routes each path through transformAssetUrl() to proxy via /atx/{instance}/wp-internal-assets/... or /atx/{instance}/wp-assets/...
4. The rendered <script type="importmap"> allows <script type="module"> tags to resolve bare specifiers

• WPHead - Wrapper that includes ImportMap
• WPScripts - Renders module scripts that use the import map
• AssetUpdater - Updates import map on client-side navigation