@sanity/runtime-cli 1.6.0 → 1.8.0

package/dist/commands/blueprints/logs.js

@@ -1,10 +1,11 @@
 import { Command, Flags } from '@oclif/core';
+import { Spinner } from 'picospinner';
 import { readBlueprintOnDisk } from '../../actions/blueprints/blueprint.js';
-import { getLogs, streamLogs } from '../../actions/blueprints/logs.js';
+import { findNewestLogTimestamp, getLogs, getRecentLogs, isNewerLog, streamLogs, } from '../../actions/blueprints/logs.js';
 import config from '../../config.js';
 import { formatTitle } from '../../utils/display/blueprints-formatting.js';
-import { blue, bold, green, red, yellow } from '../../utils/display/colors.js';
-import Spinner from '../../utils/spinner.js';
+import { bold, red, yellow } from '../../utils/display/colors.js';
+import { formatLogEntry, formatLogsByDay, organizeLogsByDay, } from '../../utils/display/logs-formatting.js';
 export default class Logs extends Command {
     static description = 'Display logs for a Blueprint stack';
     static examples = [
@@ -22,11 +23,9 @@ export default class Logs extends Command {
     async run() {
         const { flags } = await this.parse(Logs);
         const watchMode = flags.watch;
-        const s = new Spinner();
         try {
             const { errors, deployedStack } = await readBlueprintOnDisk({ getStack: true });
             if (errors.length > 0) {
-                // printErrors(errors)
                 this.log('Blueprint parse errors:');
                 console.dir(errors, { depth: null });
                 return;
@@ -34,53 +33,37 @@ export default class Logs extends Command {
             if (!deployedStack)
                 this.error('Stack not found'); // returns
             const { id: stackId, projectId, name } = deployedStack;
+            const spinner = new Spinner(`Fetching logs for stack ${yellow(`<${stackId}>`)}`);
+            spinner.start();
             if (watchMode) {
-                // recent logs
-                s.start(`Fetching recent logs for stack ${stackId}`);
                 const { ok, logs, error } = await getLogs(stackId, projectId, config.token);
                 if (!ok) {
-                    s.stop(`${red('Failed')} to retrieve logs`);
+                    spinner.fail(`${red('Failed')} to retrieve logs`);
                     this.log(`Error: ${error || 'Unknown error'}`);
                     return;
                 }
-                s.stop(`${formatTitle('Blueprint', name)} ${bold('Live')} Logs`);
+                spinner.stop(); // stop and remove the spinner
+                this.log(`${formatTitle('Blueprint', name)} ${bold('Live')} Logs`);
                 if (logs.length > 0) {
                     this.log('\nMost recent logs:');
-                    const sortedLogs = [...logs].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-                    const recentLogs = sortedLogs.slice(-10);
+                    const recentLogs = getRecentLogs(logs);
                     for (const log of recentLogs) {
-                        const date = new Date(log.timestamp);
-                        const time = date.toLocaleTimeString();
-                        const day = date.toLocaleDateString();
-                        this.log(`  ${bold(day)} ${yellow(time)} ${log.message}`);
+                        this.log(`  ${formatLogEntry(log)}`);
                     }
                 }
                 else {
                     this.log(`No recent logs found for stack ${yellow(stackId)}`);
                 }
                 const onOpen = () => {
-                    this.log(`\n${bold('Watching')} for new logs...`);
-                    this.log(`Press ${bold('Ctrl+C')} to stop\n`);
+                    this.log(`Watching for new logs... ${bold('ctrl+c')} to stop`);
                 };
-                let newestTimestamp = 0;
-                if (logs.length > 0) {
-                    for (const log of logs) {
-                        const timestamp = new Date(log.timestamp).getTime();
-                        if (timestamp > newestTimestamp) {
-                            newestTimestamp = timestamp;
-                        }
-                    }
-                }
+                let newestTimestamp = findNewestLogTimestamp(logs);
                 const renderLog = (log) => {
-                    const logTimestamp = new Date(log.timestamp).getTime();
-                    if (logTimestamp <= newestTimestamp) {
+                    if (!isNewerLog(log, newestTimestamp)) {
                         return;
                     }
-                    newestTimestamp = logTimestamp;
-                    const date = new Date(log.timestamp);
-                    const time = date.toLocaleTimeString();
-                    const day = date.toLocaleDateString();
-                    this.log(`${green('>')} ${bold(day)} ${yellow(time)} ${log.message}`);
+                    newestTimestamp = new Date(log.timestamp).getTime();
+                    this.log(formatLogEntry(log, true));
                 };
                 this.debug(`${yellow('Debug:')} Connecting to streaming endpoint for stack ${stackId}...`);
                 streamLogs(stackId, projectId, config.token, renderLog, onOpen, (error) => this.log(`${red('Error:')} ${error}`));
@@ -88,49 +71,26 @@ export default class Logs extends Command {
                     // hold the line until the user terminates with Ctrl+C
                 });
             }
-            s.start(`Fetching logs for stack ${stackId}`);
             const { ok, logs, error } = await getLogs(stackId, projectId, config.token);
             if (!ok) {
-                s.stop(`${red('Failed')} to retrieve logs`);
+                spinner.fail(`${red('Failed')} to retrieve logs`);
                 this.log(`Error: ${error || 'Unknown error'}`);
                 return;
             }
             if (logs.length === 0) {
-                s.stop(`No logs found for stack ${stackId}`);
+                spinner.info(`No logs found for stack ${stackId}`);
                 return;
             }
-            s.stop(`${formatTitle('Blueprint', name)} Logs`);
+            spinner.succeed(`${formatTitle('Blueprint', name)} Logs`);
             this.log(`Found ${bold(logs.length.toString())} log entries for stack ${yellow(stackId)}\n`);
-            const logsByDay = new Map();
-            for (const log of logs) {
-                const date = new Date(log.timestamp);
-                const day = date.toLocaleDateString();
-                if (!logsByDay.has(day)) {
-                    logsByDay.set(day, []);
-                }
-                logsByDay.get(day)?.push(log);
-            }
-            const sortedDays = Array.from(logsByDay.keys()).sort((a, b) => {
-                return new Date(a).getTime() - new Date(b).getTime();
-            });
-            for (const day of sortedDays) {
-                this.log(`${blue('Date:')} ${bold(day)}`);
-                const dayLogs = logsByDay.get(day) || [];
-                dayLogs.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-                for (const [i, log] of dayLogs.entries()) {
-                    const date = new Date(log.timestamp);
-                    const time = date.toLocaleTimeString();
-                    const isLast = i === dayLogs.length - 1;
-                    this.log(`  ${isLast ? '└─' : '├─'} ${yellow(time)} ${log.message}`);
-                }
-                // new line between days
-                this.log('');
-            }
+            // Organize and format logs by day
+            const logsByDay = organizeLogsByDay(logs);
+            this.log(formatLogsByDay(logsByDay));
         }
         catch (err) {
-            s.stop('Failed to retrieve logs');
+            this.warn('Failed to retrieve logs');
             if (err instanceof Error) {
-                this.log(`Error: ${err.message}`);
+                this.error(`Error: ${err.message}`);
             }
         }
     }

package/dist/commands/blueprints/stacks.js

@@ -1,8 +1,8 @@
 import { Command } from '@oclif/core';
 import { readBlueprintOnDisk } from '../../actions/blueprints/blueprint.js';
 import { listStacks } from '../../actions/blueprints/stacks.js';
-import { bold, boldnblue, yellow } from '../../utils/display/colors.js';
-import { formatDate } from '../../utils/display/dates.js';
+import { formatStacksListing } from '../../utils/display/blueprints-formatting.js';
+import { bold, yellow } from '../../utils/display/colors.js';
 export default class Stacks extends Command {
     static description = 'List all Blueprint stacks';
     static examples = ['<%= config.bin %> <%= command.id %>'];
@@ -23,18 +23,6 @@ export default class Stacks extends Command {
             return;
         }
         this.log(`${bold('Project')} <${yellow(projectId)}> ${bold('Stacks')} :\n`);
-        for (const stack of stacks) {
-            const isCurrentStack = stackId === stack.id;
-            const stackName = isCurrentStack ? boldnblue(stack.name) : bold(stack.name);
-            this.log(`${stackName} <${yellow(stack.id)}>${isCurrentStack ? ' (current)' : ''}`);
-            if (stack.createdAt) {
-                this.log(`  Created: ${formatDate(stack.createdAt)}`);
-            }
-            if (stack.updatedAt) {
-                this.log(`  Updated: ${formatDate(stack.updatedAt)}`);
-            }
-            this.log(`  ${stack.resources.length} resource${stack.resources.length === 1 ? '' : 's'}`);
-            this.log('');
-        }
+        this.log(formatStacksListing(stacks, stackId));
     }
 }

package/dist/commands/functions/invoke.d.ts

@@ -1,7 +1,7 @@
 import { Command } from '@oclif/core';
 export default class Invoke extends Command {
     static args: {
-        id: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
+        name: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
     };
     static description: string;
     static examples: string[];

package/dist/commands/functions/invoke.js

@@ -1,12 +1,13 @@
 import { Args, Command, Flags } from '@oclif/core';
+import { Spinner } from 'picospinner';
 import { readBlueprintOnDisk } from '../../actions/blueprints/blueprint.js';
 import { invoke } from '../../actions/functions/invoke.js';
 import config from '../../config.js';
 import { red } from '../../utils/display/colors.js';
-import Spinner from '../../utils/spinner.js';
+import { findFunctionByName } from '../../utils/find-function.js';
 export default class Invoke extends Command {
     static args = {
-        id: Args.string({ description: 'The ID of the function to invoke', required: true }),
+        name: Args.string({ description: 'The name of the Sanity Function', required: true }),
     };
     static description = 'Invoke a remote Sanity Function';
     static examples = [
@@ -23,19 +24,20 @@ export default class Invoke extends Command {
     };
     async run() {
         const { args, flags } = await this.parse(Invoke);
-        const s = new Spinner();
+        const spinner = new Spinner(`Invoking function "${args.name}"`);
         const { deployedStack } = await readBlueprintOnDisk({ getStack: true });
         if (!deployedStack)
             this.error('Stack not found'); // returns
         const { projectId } = deployedStack;
-        s.start(`Invoking function "${args.id}"`);
-        const result = await invoke(args.id, { data: flags.data, file: flags.file }, { token: config.token, projectId });
+        spinner.start();
+        const { externalId } = findFunctionByName(deployedStack, args.name);
+        const result = await invoke(externalId, { data: flags.data, file: flags.file }, { token: config.token, projectId });
         if (result.ok) {
-            s.stop(`Invocation of ${args.id} succeeded`);
+            spinner.succeed(`Invocation of ${args.name} succeeded`);
             this.log(JSON.stringify(result.json, null, 2));
         }
         else {
-            s.stop(`${red('Failed')} to invoke function`);
+            spinner.fail(`${red('Failed')} to invoke function`);
             this.log(`Error: ${result.error || 'Unknown error'}`);
         }
     }

package/dist/commands/functions/logs.d.ts

@@ -1,7 +1,7 @@
 import { Command } from '@oclif/core';
 export default class Logs extends Command {
     static args: {
-        id: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
+        name: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
     };
     static description: string;
     static examples: string[];

package/dist/commands/functions/logs.js

@@ -1,38 +1,47 @@
 import { Args, Command } from '@oclif/core';
+import { Spinner } from 'picospinner';
 import { readBlueprintOnDisk } from '../../actions/blueprints/blueprint.js';
 import { logs } from '../../actions/functions/logs.js';
 import config from '../../config.js';
 import { bold, red, yellow } from '../../utils/display/colors.js';
-import Spinner from '../../utils/spinner.js';
+import { findFunctionByName } from '../../utils/find-function.js';
 export default class Logs extends Command {
     static args = {
-        id: Args.string({ description: 'The ID of the function to retrieve logs for', required: true }),
+        name: Args.string({ description: 'The name of the Sanity Function', required: true }),
     };
     static description = 'Retrieve logs for a Sanity Function';
     static examples = ['<%= config.bin %> <%= command.id %> <ID>'];
     async run() {
         const { args } = await this.parse(Logs);
-        const s = new Spinner();
+        const spinner = new Spinner(`Finding logs for function "${args.name}"`);
         const { deployedStack } = await readBlueprintOnDisk({ getStack: true });
         if (!deployedStack)
             this.error('Stack not found'); // returns
-        s.start(`Finding logs for function "${args.id}"`);
         const { name, projectId } = deployedStack;
-        const result = await logs(args.id, { token: config.token, projectId });
-        console.log(JSON.stringify(result, null, 2));
+        spinner.start();
+        const { externalId } = findFunctionByName(deployedStack, args.name);
+        const result = await logs(externalId, { token: config.token, projectId });
         if (result.ok) {
-            s.stop(`Found logs ${args.id} for blueprint "${name}"`);
+            spinner.succeed(`Found logs ${args.name} for blueprint "${name}"`);
             for (const logGroup of result.logs) {
                 for (const log of logGroup.events) {
-                    const date = new Date(log.timestamp);
-                    const time = date.toLocaleTimeString();
-                    const day = date.toLocaleDateString();
-                    this.log(`  ${bold(day)} ${yellow(time)} ${log.message}`);
+                    const { message, timestamp } = log;
+                    // INFO log format:   year  month date  hr    min   sec    ms      req uuid
+                    const logPattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z\s+[0-9a-f-]+/;
+                    if (logPattern.test(message)) {
+                        const content = message.replace(logPattern, '').trim().replace(/^INFO/, '').trim();
+                        if (content) {
+                            const date = new Date(timestamp);
+                            const time = date.toLocaleTimeString();
+                            const day = date.toLocaleDateString();
+                            this.log(`  ${bold(day)} ${yellow(time)} ${content}`);
+                        }
+                    }
                 }
             }
         }
         else {
-            s.stop(`${red('Failed')} to retrieve logs`);
+            spinner.fail(`${red('Failed')} to retrieve logs`);
             this.log(`Error: ${result.error || 'Unknown error'}`);
         }
     }

package/dist/commands/functions/test.d.ts

@@ -1,7 +1,7 @@
 import { Command } from '@oclif/core';
 export default class Test extends Command {
     static args: {
-        path: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
+        name: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
     };
     static description: string;
     static examples: string[];

package/dist/commands/functions/test.js

@@ -1,14 +1,16 @@
 import { Args, Command, Flags } from '@oclif/core';
+import { readBlueprintOnDisk } from '../../actions/blueprints/blueprint.js';
 import { testAction } from '../../actions/functions/test.js';
+import { findFunctionByName } from '../../utils/find-function.js';
 export default class Test extends Command {
     static args = {
-        path: Args.string({ description: 'The path to the function source code', required: true }),
+        name: Args.string({ description: 'The name of the Sanity Function', required: true }),
     };
     static description = 'Invoke a local Sanity Function';
     static examples = [
-        `<%= config.bin %> <%= command.id %> ./test.ts --data '{ "id": 1 }'`,
-        `<%= config.bin %> <%= command.id %> ./test.js --file 'payload.json'`,
-        `<%= config.bin %> <%= command.id %> ./test.ts --data '{ "id": 1 }' --timeout 60`,
+        `<%= config.bin %> <%= command.id %> echo-fn --data '{ "id": 1 }'`,
+        `<%= config.bin %> <%= command.id %> echo-fn --file 'payload.json'`,
+        `<%= config.bin %> <%= command.id %> echo-fn --data '{ "id": 1 }' --timeout 60`,
     ];
     static flags = {
         data: Flags.string({ char: 'd', description: 'Data to send to the function', required: false }),
@@ -25,19 +27,26 @@ export default class Test extends Command {
     };
     async run() {
         const { args, flags } = await this.parse(Test);
-        const { json, logs, error } = await testAction(args.path, {
-            data: flags.data,
-            file: flags.file,
-            timeout: flags.timeout,
-        });
-        if (!error) {
-            this.log('Logs:');
-            this.log(logs);
-            this.log('Response:');
-            this.log(JSON.stringify(json, null, 2));
+        const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
+        try {
+            const func = findFunctionByName(parsedBlueprint, args.name);
+            const { json, logs, error } = await testAction(func.src, {
+                data: flags.data,
+                file: flags.file,
+                timeout: flags.timeout,
+            });
+            if (!error) {
+                this.log('Logs:');
+                this.log(logs);
+                this.log('Response:');
+                this.log(JSON.stringify(json, null, 2));
+            }
+            else {
+                this.log(error.toString());
+            }
         }
-        else {
-            this.log(error.toString());
+        catch (error) {
+            this.log(`Error: ${error || 'Unknown error'}`);
         }
     }
 }

package/dist/config.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     token: string;
+    apiUrl: URL;
     server: {
         functions: URL;
         blueprints: URL;

package/dist/config.js

@@ -1,23 +1,29 @@
 import { env } from 'node:process';
 import getToken from './utils/get-token.js';
-const nodeEnv = env.NODE_ENV ?? 'development';
+const nodeEnv = env.NODE_ENV ?? 'production';
 const isTest = nodeEnv === 'test';
 const isDev = nodeEnv === 'development';
 const useProd = nodeEnv === 'production';
-const functionsUrls = {
+const apiUrls = {
     production: 'https://api.sanity.io/',
     staging: 'https://api.sanity.work/',
+};
+const apiUrl = new URL(apiUrls[nodeEnv] ?? apiUrls.production);
+const functionsUrls = {
+    production: apiUrl.toString(),
+    staging: apiUrl.toString(),
     default: 'http://localhost:4567',
 };
 const blueprintsUrls = {
-    production: 'https://api.sanity.io/',
-    staging: 'https://api.sanity.work/',
+    production: apiUrl.toString(),
+    staging: apiUrl.toString(),
     default: 'http://blueprints/',
 };
 const functionsUrl = new URL(functionsUrls[nodeEnv] ?? functionsUrls.default);
 const blueprintsUrl = new URL(blueprintsUrls[nodeEnv] ?? blueprintsUrls.default);
 export default {
     token: isDev || isTest ? 'token' : getToken({ prod: useProd }),
+    apiUrl,
     server: {
         functions: functionsUrl,
         blueprints: blueprintsUrl,

package/dist/server/app.js

@@ -10,10 +10,10 @@ const app = (port) => {
         switch (req.url) {
             case '/blueprint': {
                 try {
-                    const blueprint = readBlueprintOnDisk();
+                    const { parsedBlueprint } = await readBlueprintOnDisk({ getStack: false });
                     res.setHeader('Content-Type', 'application/json');
                     res.writeHead(200);
-                    res.end(JSON.stringify(blueprint));
+                    res.end(JSON.stringify(parsedBlueprint));
                 }
                 catch {
                     res.writeHead(404);

package/dist/server/static/api.js

@@ -1,48 +1,53 @@
 /* eslint-disable n/no-unsupported-features/node-builtins */
-import { Store } from './vendor/vendor.bundle.js';
+import {Store} from './vendor/vendor.bundle.js'
+
 // eslint-disable-next-line new-cap
-const store = Store();
+const store = Store()
+
 export default function API() {
-    return {
-        blueprint,
-        invoke,
-        store,
-        subscribe: store.subscribe,
-        unsubscribe: store.unsubscribe,
-    };
+  return {
+    blueprint,
+    invoke,
+    store,
+    subscribe: store.subscribe,
+    unsubscribe: store.unsubscribe,
+  }
 }
+
 function invoke(payloadText = '{}') {
-    store.inprogress = true;
-    const start = Date.now();
-    const payload = {
-        data: payloadText,
-        func: store.selectedIndex,
-    };
-    fetch('/invoke', {
-        body: JSON.stringify(payload),
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        method: 'POST',
+  store.inprogress = true
+  const start = Date.now()
+  const payload = {
+    data: payloadText,
+    func: store.selectedIndex,
+  }
+  fetch('/invoke', {
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      store.inprogress = false
+      store.result = {
+        ...data,
+        time: Date.now() - start,
+      }
     })
-        .then((response) => response.json())
-        .then((data) => {
-        store.inprogress = false;
-        store.result = {
-            ...data,
-            time: Date.now() - start,
-        };
-    });
 }
+
 function blueprint() {
-    fetch('/blueprint')
-        .then((response) => response.json())
-        .then((json) => {
-        const functions = json?.document?.resources.filter((resource) => resource.kind === 'function');
-        store.functions = functions;
-        store.selectedIndex = functions[0].src;
+  fetch('/blueprint')
+    .then((response) => response.json())
+    .then((blueprint) => {
+      const functions = blueprint?.resources.filter((r) => r.type.startsWith('sanity.function.'))
+
+      store.functions = functions
+      store.selectedIndex = functions[0].src
+    })
+    .catch(() => {
+      store.functions = []
     })
-        .catch(() => {
-        store.functions = [];
-    });
 }

package/dist/server/static/components/api-base.js

@@ -1,9 +1,10 @@
 /* globals HTMLElement */
-import apiConstructor from '../api.js';
-const api = apiConstructor();
+import apiConstructor from '../api.js'
+const api = apiConstructor()
+
 export class ApiBaseElement extends HTMLElement {
-    constructor() {
-        super();
-        this.api = api;
-    }
+  constructor() {
+    super()
+    this.api = api
+  }
 }

package/dist/server/static/components/function-list.js

@@ -1,50 +1,54 @@
 /* globals customElements */
-import { ApiBaseElement } from './api-base.js';
+import {ApiBaseElement} from './api-base.js'
+
 const template = `<ol class="hidden-lg" type="content"></ol>
 <fieldset class="pad-sm hidden block-lg"><select></select></fieldset>
-`;
+`
+
 class FunctionList extends ApiBaseElement {
-    functionClicked = (event) => {
-        // eslint-disable-next-line unicorn/prefer-dom-node-text-content
-        const target = this.api.store.functions.find((func) => func.name === event.srcElement.innerText);
-        this.api.store.selectedIndex = target.src;
-    };
-    functionSelected = (event) => {
-        this.api.store.selectedIndex = event.srcElement.value;
-    };
-    renderFunctions = () => {
-        if (this.api.store.functions.length > 0) {
-            this.list.innerHTML = this.api.store.functions
-                .map((func) => {
-                const selected = this.api.store.selectedIndex === func.src ? 'selected' : '';
-                return `<li class="pad-sm ${selected}">${func.name}</li>`;
-            })
-                .join('');
-            this.select.innerHTML = this.api.store.functions
-                .map((func) => {
-                const selected = this.api.store.selectedIndex === func.src ? 'selected' : '';
-                return `<option value="${func.src}" ${selected}>${func.name}</option>`;
-            })
-                .join('');
-        }
-        else {
-            this.list.innerHTML = '<option class="pad-sm">No blueprint.json file found</li>';
-            this.select.innerHTML = '<option>No blueprint.json file found</option>';
-        }
-    };
-    connectedCallback() {
-        this.innerHTML = template;
-        this.list = this.querySelector('ol');
-        this.select = this.querySelector('select');
-        this.list.addEventListener('click', this.functionClicked);
-        this.select.addEventListener('change', this.functionSelected);
-        this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex']);
-        this.api.blueprint();
-    }
-    disconnectedCallback() {
-        this.list.removeEventListener('click', this.functionClicked);
-        this.select.removeEventListener('change', this.functionSelected);
-        this.api.unsubscribe(this.renderFunctions);
+  functionClicked = (event) => {
+    // eslint-disable-next-line unicorn/prefer-dom-node-text-content
+    const target = this.api.store.functions.find((func) => func.name === event.srcElement.innerText)
+    this.api.store.selectedIndex = target.src
+  }
+  functionSelected = (event) => {
+    this.api.store.selectedIndex = event.srcElement.value
+  }
+  renderFunctions = () => {
+    if (this.api.store.functions.length > 0) {
+      this.list.innerHTML = this.api.store.functions
+        .map((func) => {
+          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
+          return `<li class="pad-sm ${selected}">${func.name}</li>`
+        })
+        .join('')
+      this.select.innerHTML = this.api.store.functions
+        .map((func) => {
+          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
+          return `<option value="${func.src}" ${selected}>${func.name}</option>`
+        })
+        .join('')
+    } else {
+      this.list.innerHTML = '<option class="pad-sm">No blueprint.json file found</li>'
+      this.select.innerHTML = '<option>No blueprint.json file found</option>'
     }
+  }
+
+  connectedCallback() {
+    this.innerHTML = template
+    this.list = this.querySelector('ol')
+    this.select = this.querySelector('select')
+    this.list.addEventListener('click', this.functionClicked)
+    this.select.addEventListener('change', this.functionSelected)
+    this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
+    this.api.blueprint()
+  }
+
+  disconnectedCallback() {
+    this.list.removeEventListener('click', this.functionClicked)
+    this.select.removeEventListener('change', this.functionSelected)
+    this.api.unsubscribe(this.renderFunctions)
+  }
 }
-customElements.define('function-list', FunctionList);
+
+customElements.define('function-list', FunctionList)