@nolgard/webapps-runtime

Standardized runtime host utilities for Pinecone webapps.

Why

This package extracts shared custom-element runtime behavior used by both Svelte and React addons:

• Shadow DOM setup
• Lifecycle-safe mount/unmount/update
• Dataset-to-CSS-variable mapping
• Addon config attribute handling
• Optional extra CSS injection from data-css or data-css-url

API

• defineWebAppElement(options)
• createSvelteAdapter({ mount, unmount, component })
• createReactAdapter({ createRoot, createElement, component })
• ensureInstanceId(element, options?)

Example (Svelte)

import { mount, unmount } from 'svelte'
import App from './App.svelte'
import { defineWebAppElement, createSvelteAdapter } from '@nolgard/webapps-runtime'

const ElementClass = defineWebAppElement({
  tagName: 'pinecone-example',
  cssHref: '/pinecone/assets/addons/example/pinecone-example.css',
  ...createSvelteAdapter({ mount, unmount, component: App }),
  resolveProps: ({ dataset }) => ({ ...dataset }),
})

export default ElementClass

Example (React)

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import { defineWebAppElement, createReactAdapter } from '@nolgard/webapps-runtime'

const ElementClass = defineWebAppElement({
  tagName: 'pinecone-example-react',
  cssHref: '/pinecone/assets/addons/example-react/pinecone-example-react.css',
  ...createReactAdapter({ createRoot, createElement: React.createElement, component: App }),
  resolveProps: ({ dataset }) => ({ ...dataset }),
})

export default ElementClass