diff --git a/src/cli/domain/ocConfig.ts b/src/cli/domain/ocConfig.ts index 1047c5d3..d08bb667 100644 --- 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 section. */ + importmap?: { + imports?: Record; + }; /** 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; + }; 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 index b9118632..38798fab 100644 --- 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 index 1e12140d..027604f0 100644 --- 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; + }; 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}`;