diff --git a/unraid-ui/src/forms/MissingRenderer.vue b/unraid-ui/src/forms/MissingRenderer.vue index d2cc0e706..7710f9275 100644 --- a/unraid-ui/src/forms/MissingRenderer.vue +++ b/unraid-ui/src/forms/MissingRenderer.vue @@ -8,8 +8,15 @@ diff --git a/unraid-ui/src/register.ts b/unraid-ui/src/register.ts index 7d7b57a7e..122c16bb3 100644 --- a/unraid-ui/src/register.ts +++ b/unraid-ui/src/register.ts @@ -10,7 +10,6 @@ type RegisterParams = { pathToSharedCss?: string; }; -// Type for our simplified Vue component representation type CustomElementComponent = { styles?: string[]; render?: () => unknown; @@ -22,9 +21,7 @@ export function registerAllComponents(params: RegisterParams = {}) { const { namePrefix = 'uui', pathToSharedCss = './src/styles/index.css' } = params; Object.entries(Components).forEach(([name, originalComponent]) => { - // Use explicit type assertion instead of type predicates try { - // Skip anything that doesn't look like a Vue component if (typeof originalComponent !== 'object' || originalComponent === null) { if (debugImports) { console.log(`[register components] Skipping non-object: ${name}`); @@ -32,7 +29,6 @@ export function registerAllComponents(params: RegisterParams = {}) { return; } - // Skip function values if (typeof originalComponent === 'function') { if (debugImports) { console.log(`[register components] Skipping function: ${name}`); @@ -40,7 +36,6 @@ export function registerAllComponents(params: RegisterParams = {}) { return; } - // Skip if not a Vue component if (!('render' in originalComponent || 'setup' in originalComponent)) { if (debugImports) { console.log(`[register components] Skipping non-component object: ${name}`); @@ -48,14 +43,11 @@ export function registerAllComponents(params: RegisterParams = {}) { return; } - // Now we can safely use type assertion since we've validated the component const component = originalComponent as CustomElementComponent; - // add our shared css to each web component component.styles ??= []; component.styles.unshift(`@import "${pathToSharedCss}"`); - // translate ui component names from PascalCase to kebab-case let elementName = kebabCase(name); if (!elementName) { console.log('[register components] Could not translate component name to kebab-case:', name); @@ -63,12 +55,10 @@ export function registerAllComponents(params: RegisterParams = {}) { } elementName = namePrefix + elementName; - // register custom web components if (debugImports) { console.log(name, elementName, component.styles); } - // Use appropriate casting for defineCustomElement customElements.define(elementName, defineCustomElement(component as object)); } catch (error) { console.error(`[register components] Error registering component ${name}:`, error);