fix: resolve blank inline script panel for components with underscores in ID (#8457)

* fix: resolve blank inline script panel for components with underscores in ID

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* perf: compute matched grid item once per selection instead of per-item

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ruben Fiszel
2026-03-19 16:54:30 +00:00
committed by GitHub
co-authored by Claude Opus 4.6
parent ff78f448be
commit b2c1e3de0a
@@ -1,6 +1,6 @@
<script lang="ts">
import { getContext } from 'svelte'
import type { AppEditorContext, AppViewerContext } from '../../types'
import type { AppEditorContext, AppViewerContext, GridItem } from '../../types'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
import InlineScriptEditor from './InlineScriptEditor.svelte'
@@ -39,19 +39,53 @@
}
}
// let gridItem = $derived(
// $selectedComponentInEditor && !$selectedComponentInEditor.startsWith(BG_PREFIX)
// // ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
// : undefined
// )
let prefixOrId = $derived.by(() => {
const sel = $selectedComponentInEditor
if (!sel) return undefined
if (sel.startsWith(BG_PREFIX)) return 'bg'
return sel.endsWith('_transformer') ? sel.slice(0, -'_transformer'.length) : sel
})
let id = $derived.by(() => {
const sel = $selectedComponentInEditor
if (!sel || !sel.startsWith(BG_PREFIX)) return undefined
const rest = sel.slice(BG_PREFIX.length)
return rest.endsWith('_transformer') ? rest.slice(0, -'_transformer'.length) : rest
})
let [prefixOrId, id] = $derived($selectedComponentInEditor?.split('_') ?? [])
function containsAction(gridItem: GridItem, actionId: string): boolean {
if (!gridItem?.data) return false
const data = gridItem.data
if (data.type === 'tablecomponent') {
return data.actionButtons?.some((a) => a.id === actionId) ?? false
}
if (
data.type === 'aggridcomponent' ||
data.type === 'aggridcomponentee' ||
data.type === 'dbexplorercomponent' ||
data.type === 'aggridinfinitecomponent' ||
data.type === 'aggridinfinitecomponentee'
) {
return data.actions?.some((a) => a.id === actionId) ?? false
}
if (data.type === 'menucomponent') {
return data.menuItems?.some((a) => a.id === actionId) ?? false
}
return false
}
// let unusedInlineScript = $derived(
// $app?.unusedInlineScripts?.findIndex(
// (k_, index) => `unused-${index}` === $selectedComponentInEditor
// )
// )
// Resolve which grid item ID to render — computed once per selection change
let matchedGridItemId = $derived.by(() => {
if (!prefixOrId || prefixOrId === 'bg' || prefixOrId.startsWith('unused-')) return undefined
const allItems: GridItem[] = [
...($app?.grid ?? []),
...Object.values($app?.subgrids ?? {}).flat()
]
// Fast path: direct ID match (most common)
if (allItems.some((item) => item?.id === prefixOrId)) return prefixOrId
// Slow path: check nested actions
const parent = allItems.find((item) => containsAction(item, prefixOrId))
return parent?.id
})
interface Props {
width?: number | undefined
@@ -72,9 +106,9 @@
<div class="text-sm text-secondary text-center py-8 px-2">
Select a runnable on the left panel
</div>
{:else if prefixOrId != 'bg' && !prefixOrId.startsWith('unused-')}
{:else if prefixOrId != 'bg' && !prefixOrId?.startsWith('unused-')}
{#each $app.grid as gridItem, index (gridItem?.id)}
{#if gridItem?.id == prefixOrId}
{#if gridItem?.id == matchedGridItemId}
<InlineScriptsPanelWithTable
on:createScriptFromInlineScript={(e) => {
createScriptFromInlineScript(
@@ -90,7 +124,7 @@
{/each}
{#each Object.keys($app.subgrids ?? {}) as subgrid (subgrid)}
{#each $app.subgrids?.[subgrid] ?? [] as subgridItem, index (subgridItem?.id)}
{#if subgridItem?.id == prefixOrId && $app.subgrids?.[subgrid]}
{#if subgridItem?.id == matchedGridItemId && $app.subgrids?.[subgrid]}
<InlineScriptsPanelWithTable
on:createScriptFromInlineScript={(e) => {
createScriptFromInlineScript(
@@ -105,7 +139,7 @@
{/if}
{/each}
{/each}
{:else if prefixOrId != 'bg' && prefixOrId.startsWith('unused-')}
{:else if prefixOrId != 'bg' && prefixOrId?.startsWith('unused-')}
{#each $app.unusedInlineScripts as unusedInlineScript, index}
{#if `unused-${index}` == prefixOrId}
<InlineScriptEditor