Data Flow Example Fix

Problem

The "Data Flow" example (and several other examples) were using a non-existent component. This caused:

Root Cause

There is a panFetch utility in /ui/pan-fetch.mjs, but it's not a Web Component—it's a JavaScript utility function for authenticated fetch operations. The examples incorrectly tried to use it as with attributes.

Solution

The correct component to use is , which:

• Is a real Web Component that can be added to the DOM
• Connects REST APIs to PAN topics
• Automatically handles CRUD operations
• Works seamlessly with and

Changes Made

1. Fixed Examples (examples.mjs)

Updated three examples to use pan-data-connector instead of the non-existent pan-fetch:

// Before (broken):
{
  name: 'pan-fetch',
  attributes: {
    'url': 'https://jsonplaceholder.typicode.com/users',
    'topic': 'users.loaded'
  }
}

// After (working):
{
  name: 'pan-data-connector',
  attributes: {
    'resource': 'users',
    'base-url': 'https://jsonplaceholder.typicode.com'
  }
}

Also updated:

• Search & Filter example
• Pagination example

2. Added Component Metadata (component-registry.json)

Added complete attribute definitions for pan-data-connector:

{
  "name": "pan-data-connector",
  "attributes": [
    {
      "name": "resource",
      "type": "string",
      "description": "Logical resource name (e.g., 'users', 'posts')",
      "required": true
    },
    {
      "name": "base-url",
      "type": "string",
      "description": "Base URL for the API",
      "required": true
    },
    {
      "name": "key",
      "type": "string",
      "description": "Identifier field name (default: 'id')",
      "default": "id"
    },
    {
      "name": "list-path",
      "type": "string",
      "description": "Override for list endpoint (default: /{resource})"
    },
    {
      "name": "item-path",
      "type": "string",
      "description": "Override for item endpoint (default: /{resource}/:id)"
    },
    {
      "name": "update-method",
      "type": "select",
      "description": "HTTP method for updates (default: PUT)",
      "options": ["PUT", "PATCH"]
    },
    {
      "name": "credentials",
      "type": "select",
      "description": "Fetch credentials mode",
      "options": ["omit", "same-origin", "include"]
    }
  ]
}

3. Added Help Text

Added comprehensive help text explaining:

• How pan-data-connector works with pan-data-table
• PAN topic patterns ({resource}.list.get → {resource}.list.state)
• Example configurations
• Related components

How It Works Now

Architecture

[pan-data-connector]  ←→  [PAN Bus]  ←→  [pan-data-table]
       ↓                                          ↑
   REST API                                   Displays

Flow

Example Usage

<!-- Connector: Fetches from API and publishes to PAN -->
<pan-data-connector
  resource="users"
  base-url="https://jsonplaceholder.typicode.com">
</pan-data-connector>

<!-- Table: Subscribes to PAN and displays data -->
<pan-data-table
  resource="users"
  columns="name,email,phone">
</pan-data-table>

Testing

cd playground
   python3 -m http.server 8080
   open http://localhost:8080/

Related Components

• pan-data-table: Displays data from {resource}.list.state
• pan-form: CRUD form that works with data connector
• pan-graphql-connector: Similar connector for GraphQL APIs
• pan-php-connector: Specialized connector for PHP backends

Benefits

✅ Working data fetching - API data now loads correctly ✅ Editable properties - All attributes can be configured in the UI ✅ Self-documenting - Help text explains the component ✅ CRUD-ready - Full create, read, update, delete support ✅ Auth-aware - Automatically includes auth tokens if pan-auth is present

Why This Pattern?

Instead of a simple component, LARC uses resource-oriented connectors because:

This is more powerful than a simple fetch wrapper!