diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts index dc4fa78ecf..90a57db773 100644 --- a/packages/devtools-kit/src/_types/client-api.ts +++ b/packages/devtools-kit/src/_types/client-api.ts @@ -113,9 +113,13 @@ export interface NuxtDevtoolsHostClient { syncClient: () => NuxtDevtoolsHostClient } +export interface CodeHighlightOptions { + grammarContextCode?: string +} + export interface NuxtDevtoolsClient { rpc: BirpcReturn - renderCodeHighlight: (code: string, lang?: BuiltinLanguage) => { + renderCodeHighlight: (code: string, lang?: BuiltinLanguage, options?: CodeHighlightOptions) => { code: string supported: boolean } diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts index abcbae5d9f..70a37f52b2 100644 --- a/packages/devtools-kit/src/_types/rpc.ts +++ b/packages/devtools-kit/src/_types/rpc.ts @@ -6,13 +6,14 @@ import type { AnalyzeBuildsInfo } from './analyze-build' import type { ModuleCustomTab } from './custom-tabs' import type { AssetEntry, AssetInfo, AutoImportsWithMetadata, ComponentRelationship, HookInfo, ImageMeta, NpmCommandOptions, NpmCommandType, PackageUpdateInfo, ScannedNitroTasks, ServerRouteInfo } from './integrations' import type { ModuleOptions, NuxtDevToolsOptions } from './options' -import type { InstallModuleReturn } from './server-ctx' +import type { InstallModuleReturn, ServerDebugContext } from './server-ctx' import type { TerminalAction, TerminalInfo } from './terminals' import type { GetWizardArgs, WizardActions } from './wizard' export interface ServerFunctions { // Static RPCs (can be provide on production build in the future) getServerConfig: () => NuxtOptions + getServerDebugContext: () => Promise getServerData: (token: string) => Promise getServerRuntimeConfig: () => Record getModuleOptions: () => ModuleOptions diff --git a/packages/devtools-kit/src/_types/server-ctx.ts b/packages/devtools-kit/src/_types/server-ctx.ts index b730aa011a..8bcaf4b016 100644 --- a/packages/devtools-kit/src/_types/server-ctx.ts +++ b/packages/devtools-kit/src/_types/server-ctx.ts @@ -1,5 +1,5 @@ import type { BirpcGroup } from 'birpc' -import type { Nuxt } from 'nuxt/schema' +import type { Nuxt, NuxtDebugModuleMutationRecord } from 'nuxt/schema' import type { ModuleOptions } from './options' import type { ClientFunctions, ServerFunctions } from './rpc' @@ -42,3 +42,9 @@ export interface InstallModuleReturn { commands: string[] processId: string } + +export type ServerDebugModuleMutationRecord = (Omit & { name: string }) + +export interface ServerDebugContext { + moduleMutationRecords: ServerDebugModuleMutationRecord[] +} diff --git a/packages/devtools-ui-kit/src/components/NBadgeHashed.vue b/packages/devtools-ui-kit/src/components/NBadgeHashed.vue new file mode 100644 index 0000000000..390ea3fbf9 --- /dev/null +++ b/packages/devtools-ui-kit/src/components/NBadgeHashed.vue @@ -0,0 +1,21 @@ + + + diff --git a/packages/devtools-ui-kit/src/components/NCodeBlock.vue b/packages/devtools-ui-kit/src/components/NCodeBlock.vue index bf8b8cd12a..29562c52e5 100644 --- a/packages/devtools-ui-kit/src/components/NCodeBlock.vue +++ b/packages/devtools-ui-kit/src/components/NCodeBlock.vue @@ -10,6 +10,7 @@ const props = withDefaults( lang?: BuiltinLanguage | 'text' lines?: boolean inline?: boolean + grammarContextCode?: string transformRendered?: (code: string) => string }>(), { @@ -22,7 +23,7 @@ const emit = defineEmits(['loaded']) const rendered = computed(() => { const result = props.lang === 'text' ? { code: props.code, supported: false } - : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang) || { code: props.code, supported: false } + : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang, { grammarContextCode: props.grammarContextCode }) || { code: props.code, supported: false } if (result.supported && props.transformRendered) result.code = props.transformRendered(result.code) if (result.supported) diff --git a/packages/devtools-ui-kit/src/composables/color.ts b/packages/devtools-ui-kit/src/composables/color.ts new file mode 100644 index 0000000000..34258ec1dc --- /dev/null +++ b/packages/devtools-ui-kit/src/composables/color.ts @@ -0,0 +1,7 @@ +export function getHslColorFromStringHash(name: string, saturation = 65, lightness = 50, opacity: number | string = 1) { + let hash = 0 + for (let i = 0; i < name.length; i++) + hash = name.charCodeAt(i) + ((hash << 5) - hash) + const h = hash % 360 + return `hsla(${h}, ${saturation}%, ${lightness}%, ${opacity})` +} diff --git a/packages/devtools-ui-kit/src/module.ts b/packages/devtools-ui-kit/src/module.ts index 19badeef20..9a9130c8ab 100644 --- a/packages/devtools-ui-kit/src/module.ts +++ b/packages/devtools-ui-kit/src/module.ts @@ -16,7 +16,7 @@ export interface ModuleOptions { export default defineNuxtModule({ meta: { - name: 'devtools-ui-kit', + name: '@nuxt/devtools-ui-kit', configKey: 'devtoolsUIKit', }, defaults: { @@ -35,9 +35,6 @@ export default defineNuxtModule({ if (!options.dev) nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss) - // eslint-disable-next-line ts/ban-ts-comment - // @ts-ignore - module options - nuxt.options.vueuse = nuxt.options.vueuse || {} // eslint-disable-next-line ts/ban-ts-comment // @ts-ignore - module options nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: '' }) diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue index 708a6fab16..2855d8978f 100644 --- a/packages/devtools/client/components/BuildAnalyzeDetails.vue +++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue @@ -57,10 +57,10 @@ async function clear(name: string) { @@ -68,7 +68,7 @@ async function clear(name: string) {
@@ -126,17 +126,17 @@ async function clear(name: string) {