refactor: workbench store and move logic into action runner (#4)

This commit is contained in:
Dominic Elm
2024-07-22 17:40:28 +02:00
committed by GitHub
parent cae55a7026
commit f4987a4ecd
10 changed files with 295 additions and 237 deletions

View File

@@ -25,6 +25,13 @@ export class PreviewsStore {
webcontainer.on('port', (port, type, url) => {
let previewInfo = this.#availablePreviews.get(port);
if (type === 'close' && previewInfo) {
this.#availablePreviews.delete(port);
this.previews.set(this.previews.get().filter((preview) => preview.port !== port));
return;
}
const previews = this.previews.get();
if (!previewInfo) {

View File

@@ -1,48 +1,24 @@
import { atom, map, type MapStore, type ReadableAtom, type WritableAtom } from 'nanostores';
import type { EditorDocument, ScrollPosition } from '../../components/editor/codemirror/CodeMirrorEditor';
import type { BoltAction } from '../../types/actions';
import { unreachable } from '../../utils/unreachable';
import { ActionRunner } from '../runtime/action-runner';
import type { ActionCallbackData, ArtifactCallbackData } from '../runtime/message-parser';
import { webcontainer } from '../webcontainer';
import { chatStore } from './chat';
import { EditorStore } from './editor';
import { FilesStore, type FileMap } from './files';
import { PreviewsStore } from './previews';
const MIN_SPINNER_TIME = 200;
export type BaseActionState = BoltAction & {
status: 'running' | 'complete' | 'pending' | 'aborted';
executing: boolean;
abort?: () => void;
};
export type FailedActionState = BoltAction &
Omit<BaseActionState, 'status'> & {
status: 'failed';
error: string;
};
export type ActionState = BaseActionState | FailedActionState;
type BaseActionUpdate = Partial<Pick<BaseActionState, 'status' | 'executing' | 'abort'>>;
export type ActionStateUpdate =
| BaseActionUpdate
| (Omit<BaseActionUpdate, 'status'> & { status: 'failed'; error: string });
export interface ArtifactState {
title: string;
closed: boolean;
currentActionPromise: Promise<void>;
actions: MapStore<Record<string, ActionState>>;
runner: ActionRunner;
}
export type ArtifactUpdateState = Pick<ArtifactState, 'title' | 'closed'>;
type Artifacts = MapStore<Record<string, ArtifactState>>;
export class WorkbenchStore {
#actionRunner = new ActionRunner(webcontainer);
#previewsStore = new PreviewsStore(webcontainer);
#filesStore = new FilesStore(webcontainer);
#editorStore = new EditorStore(webcontainer);
@@ -102,148 +78,63 @@ export class WorkbenchStore {
}
abortAllActions() {
for (const [, artifact] of Object.entries(this.artifacts.get())) {
for (const [, action] of Object.entries(artifact.actions.get())) {
if (action.status === 'running') {
action.abort?.();
}
}
}
// TODO: what do we wanna do and how do we wanna recover from this?
}
addArtifact({ id, messageId, title }: ArtifactCallbackData) {
const artifacts = this.artifacts.get();
const artifactKey = getArtifactKey(id, messageId);
const artifact = artifacts[artifactKey];
addArtifact({ messageId, title }: ArtifactCallbackData) {
const artifact = this.#getArtifact(messageId);
if (artifact) {
return;
}
this.artifacts.setKey(artifactKey, {
this.artifacts.setKey(messageId, {
title,
closed: false,
actions: map({}),
currentActionPromise: Promise.resolve(),
runner: new ActionRunner(webcontainer),
});
}
updateArtifact({ id, messageId }: ArtifactCallbackData, state: Partial<ArtifactState>) {
const artifacts = this.artifacts.get();
const key = getArtifactKey(id, messageId);
const artifact = artifacts[key];
updateArtifact({ messageId }: ArtifactCallbackData, state: Partial<ArtifactUpdateState>) {
const artifact = this.#getArtifact(messageId);
if (!artifact) {
return;
}
this.artifacts.setKey(key, { ...artifact, ...state });
this.artifacts.setKey(messageId, { ...artifact, ...state });
}
async addAction(data: ActionCallbackData) {
const { artifactId, messageId, actionId } = data;
const { messageId } = data;
const artifacts = this.artifacts.get();
const key = getArtifactKey(artifactId, messageId);
const artifact = artifacts[key];
const artifact = this.#getArtifact(messageId);
if (!artifact) {
unreachable('Artifact not found');
}
const actions = artifact.actions.get();
const action = actions[actionId];
if (action) {
return;
}
artifact.actions.setKey(actionId, { ...data.action, status: 'pending', executing: false });
artifact.currentActionPromise.then(() => {
if (chatStore.get().aborted) {
return;
}
this.#updateAction(key, actionId, { status: 'running' });
});
artifact.runner.addAction(data);
}
async runAction(data: ActionCallbackData) {
const { artifactId, messageId, actionId } = data;
const { messageId } = data;
const artifacts = this.artifacts.get();
const key = getArtifactKey(artifactId, messageId);
const artifact = artifacts[key];
const artifact = this.#getArtifact(messageId);
if (!artifact) {
unreachable('Artifact not found');
}
const actions = artifact.actions.get();
const action = actions[actionId];
if (!action) {
unreachable('Expected action to exist');
}
if (action.executing || action.status === 'complete' || action.status === 'failed' || action.status === 'aborted') {
return;
}
artifact.currentActionPromise = artifact.currentActionPromise.then(async () => {
if (chatStore.get().aborted) {
return;
}
const abortController = new AbortController();
this.#updateAction(key, actionId, {
status: 'running',
executing: true,
abort: () => {
abortController.abort();
this.#updateAction(key, actionId, { status: 'aborted' });
},
});
try {
await Promise.all([
this.#actionRunner.runAction(data, abortController.signal),
new Promise((resolve) => setTimeout(resolve, MIN_SPINNER_TIME)),
]);
if (!abortController.signal.aborted) {
this.#updateAction(key, actionId, { status: 'complete' });
}
} catch (error) {
this.#updateAction(key, actionId, { status: 'failed', error: 'Action failed' });
throw error;
} finally {
this.#updateAction(key, actionId, { executing: false });
}
});
artifact.runner.runAction(data);
}
#updateAction(artifactId: string, actionId: string, newState: ActionStateUpdate) {
#getArtifact(id: string) {
const artifacts = this.artifacts.get();
const artifact = artifacts[artifactId];
if (!artifact) {
return;
}
const actions = artifact.actions.get();
artifact.actions.setKey(actionId, { ...actions[actionId], ...newState });
return artifacts[id];
}
}
export function getArtifactKey(artifactId: string, messageId: string) {
return `${artifactId}_${messageId}`;
}
export const workbenchStore = new WorkbenchStore();
if (import.meta.hot) {