Merge pull request #1459 from opencomponents/support-dev-importmap

ricardo-devis-agullo · web-flow · commit 40d821a59a6f · 2025-10-20T08:59:01.000+02:00
add support for importmap in oc.json for oc dev
diff --git a/src/cli/domain/ocConfig.ts b/src/cli/domain/ocConfig.ts
@@ -9,6 +9,10 @@ export interface OpenComponentsConfig {
   registries?: string[];
   /** Development-specific configuration settings */
   development?: {
+    /** Importmap to add to the preview HTML's <head> section. */
+    importmap?: {
+      imports?: Record<string, string>;
+    };
     /** Additional Express routes to mount on the registry application */
     routes?: Array<{
       route: string;
@@ -48,9 +52,13 @@ export interface OpenComponentsConfig {
 }
 
 type ParsedConfig = {
+  $schema?: string | null;
   sourcePath?: string;
   registries: string[];
   development: {
+    importmap?: {
+      imports?: Record<string, string>;
+    };
     routes?: Array<{
       route: string;
       method: string;
@@ -100,6 +108,7 @@ function parseConfig(config: OpenComponentsConfig): ParsedConfig {
     ...config,
     registries: config.registries || [],
     development: {
+      importmap: config.development?.importmap,
       preload: config.development?.preload,
       plugins,
       fallback: config.development?.fallback,
@@ -131,6 +140,10 @@ export function getOcConfig(folder?: string): ParsedConfig {
 
 export function setOcConfig(config: ParsedConfig, path?: string) {
   const { sourcePath, ...rest } = config;
+  if (!rest.$schema) {
+    rest.$schema = 'https://opencomponents.github.io/schema.json';
+  }
+
   fs.writeFileSync(
     path || sourcePath || settings.configFile.src,
     JSON.stringify(rest, null, 2)
diff --git a/src/registry/routes/component-preview.ts b/src/registry/routes/component-preview.ts
@@ -1,5 +1,6 @@
 import type { Request, Response } from 'express';
 import { fromPromise } from 'universalify';
+import { getOcConfig } from '../../cli/domain/ocConfig';
 import type { Component, Config, TemplateInfo } from '../../types';
 import type { Repository } from '../domain/repository';
 import * as urlBuilder from '../domain/url-builder';
@@ -32,6 +33,7 @@ function componentPreview(
     res.send(
       previewView({
         component,
+        importmap: getOcConfig(res.conf.path)?.development?.importmap,
         fallbackClient: res.conf.fallbackClient
           ? `${res.conf.fallbackRegistryUrl.replace(/\/$/, '')}/oc-client/client.dev.js`
           : undefined,
diff --git a/src/registry/views/preview.ts b/src/registry/views/preview.ts
@@ -7,11 +7,14 @@ export default function preview(vm: {
   qs: string;
   liveReload: string;
   templates: TemplateInfo[];
+  importmap?: {
+    imports?: Record<string, string>;
+  };
   preload?: string;
 }): string {
   const baseUrl = vm.href.replace('http://', '//').replace('https://', '//');
   const { name, version } = vm.component;
-  const imports = vm.component.oc.files.imports;
+  const imports = vm.importmap?.imports || vm.component.oc.files.imports;
   const componentHref = `${baseUrl}${name}/${version}/${vm.qs}`;
   const clientHref = vm.fallbackClient || `${baseUrl}oc-client/client.js`;
   const id = `oc-${name}@${version}`;
