fix(components): ui prop override with class (#136)

docs/app/composables/fetchContentExamplesCode.ts

@@ -1,6 +1,6 @@
 const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))
 
-export async function fetchContentExampleCode (name?: string) {
+export async function fetchContentExampleCode(name?: string) {
   if (!name) return
   const state = useContentExamplesCodeState()
 
@@ -8,7 +8,9 @@ export async function fetchContentExampleCode (name?: string) {
     await state.value[name]
     return state.value[name]
   }
-  if (state.value[name]) { return state.value[name] }
+  if (state.value[name]) {
+    return state.value[name]
+  }
 
   // add to nitro prerender
   if (import.meta.server) {

docs/app/composables/useShikiHighlighter.ts

@@ -1,31 +0,0 @@
-import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
-import MaterialTheme from 'shiki/themes/material-theme.mjs'
-import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import HtmlLang from 'shiki/langs/html.mjs'
-import MdcLang from 'shiki/langs/mdc.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
-import YamlLang from 'shiki/langs/yaml.mjs'
-import PostcssLang from 'shiki/langs/postcss.mjs'
-
-let highlighter
-export const useShikiHighlighter = () => {
-  if (!highlighter) {
-    highlighter = createShikiHighlighter({
-      bundledThemes: {
-        'material-theme': MaterialTheme,
-        'material-theme-lighter': MaterialThemeLighter,
-        'material-theme-palenight': MaterialThemePalenight
-      },
-      bundledLangs: {
-        html: HtmlLang,
-        mdc: MdcLang,
-        vue: VueLang,
-        yml: YamlLang,
-        postcss: PostcssLang
-      }
-    })
-  }
-
-  return highlighter
-}

docs/app/plugins/prettier.ts

@@ -2,10 +2,10 @@ import type { Options } from 'prettier'
 import PrettierWorker from '@/workers/prettier.js?worker&inline'
 
 export interface SimplePrettier {
-  format: (source: string, options?: Options) => Promise<string>;
+  format: (source: string, options?: Options) => Promise<string>
 }
 
-function createPrettierWorkerApi (worker: Worker): SimplePrettier {
+function createPrettierWorkerApi(worker: Worker): SimplePrettier {
   let counter = 0
   const handlers = {}
 
@@ -17,6 +17,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
     }
 
     const [resolve, reject] = handlers[uid]
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete handlers[uid]
 
     if (error) {
@@ -26,7 +27,7 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
     }
   })
 
-  function postMessage<T> (message) {
+  function postMessage<T>(message) {
     const uid = ++counter
     return new Promise<T>((resolve, reject) => {
       handlers[uid] = [resolve, reject]
@@ -35,19 +36,19 @@ function createPrettierWorkerApi (worker: Worker): SimplePrettier {
   }
 
   return {
-    format (source: string, options?: Options) {
+    format(source: string, options?: Options) {
       return postMessage({ type: 'format', source, options })
     }
   }
 }
 
 export default defineNuxtPlugin({
-  async setup () {
+  async setup() {
     let prettier: SimplePrettier
     if (import.meta.server) {
       const prettierModule = await import('prettier')
       prettier = {
-        format (source, options = {
+        format(source, options = {
           parser: 'markdown'
         }) {
           return prettierModule.format(source, options)

docs/app/workers/prettier.js

@@ -10,14 +10,14 @@ self.onmessage = async function (event) {
   })
 }
 
-function handleMessage (message) {
+function handleMessage(message) {
   switch (message.type) {
     case 'format':
       return handleFormatMessage(message)
   }
 }
 
-async function handleFormatMessage (message) {
+async function handleFormatMessage(message) {
   const { options, source } = message
   const formatted = await prettier.format(source, {
     parser: 'markdown',

docs/modules/content-examples-code.ts

@@ -1,5 +1,5 @@
-import { existsSync, readFileSync } from 'fs'
-import fsp from 'fs/promises'
+import { existsSync, readFileSync } from 'node:fs'
+import fsp from 'node:fs/promises'
 import { dirname, join } from 'pathe'
 import { defineNuxtModule, addTemplate, addServerHandler, createResolver } from '@nuxt/kit'
 
@@ -7,20 +7,20 @@ export default defineNuxtModule({
   meta: {
     name: 'content-examples-code'
   },
-  async setup (_options, nuxt) {
+  async setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url)
     let _configResolved: any
     let components: Record<string, any>
     const outputPath = join(nuxt.options.buildDir, 'content-examples-code')
 
-    async function stubOutput () {
+    async function stubOutput() {
       if (existsSync(outputPath + '.mjs')) {
         return
       }
       await updateOutput('export default {}')
     }
 
-    async function fetchComponent (component: string | any) {
+    async function fetchComponent(component: string | any) {
       if (typeof component === 'string') {
         if (components[component]) {
           component = components[component]
@@ -51,7 +51,7 @@ export default defineNuxtModule({
     const getVirtualModuleContent = () =>
       `export default ${getStringifiedComponents()}`
 
-    async function updateOutput (content?: string) {
+    async function updateOutput(content?: string) {
       const path = outputPath + '.mjs'
       if (!existsSync(dirname(path))) {
         await fsp.mkdir(dirname(path), { recursive: true })
@@ -62,13 +62,13 @@ export default defineNuxtModule({
       await fsp.writeFile(path, content || getVirtualModuleContent(), 'utf-8')
     }
 
-    async function fetchComponents () {
+    async function fetchComponents() {
       await Promise.all(Object.keys(components).map(fetchComponent))
     }
 
     nuxt.hook('components:extend', async (_components) => {
       components = _components
-        .filter((v) => v.shortPath.includes('components/content/examples/'))
+        .filter(v => v.shortPath.includes('components/content/examples/'))
         .reduce((acc, component) => {
           acc[component.pascalName] = component
           return acc
@@ -87,17 +87,17 @@ export default defineNuxtModule({
       vite.config.plugins.push({
         name: 'content-examples-code',
         enforce: 'post',
-        async buildStart () {
+        async buildStart() {
           if (_configResolved?.build.ssr) {
             return
           }
           await fetchComponents()
           await updateOutput()
         },
-        configResolved (config) {
+        configResolved(config) {
           _configResolved = config
         },
-        async handleHotUpdate ({ file }) {
+        async handleHotUpdate({ file }) {
           if (
             Object.entries(components).some(
               ([, comp]: any) => comp.filePath === file

docs/server/api/content-examples-code.get.ts

@@ -1,6 +1,6 @@
 import { defineEventHandler, createError, appendHeader } from 'h3'
 import { pascalCase } from 'scule'
-// @ts-expect-error
+// @ts-expect-error - no types available
 import components from '#content-examples-code/nitro'
 
 export default defineEventHandler((event) => {

docs/server/api/pulls.json.get.ts

@@ -1,6 +1,6 @@
 import { Octokit } from '@octokit/rest'
 
-function isUserABot (user) {
+function isUserABot(user) {
   return user?.login?.endsWith('-bot') || user?.login?.endsWith('[bot]')
 }