@trojanbox-vcp-test/site-edit-engine 0.1.0

package/dist/runtime.js

@@ -0,0 +1,134 @@
+import { SiteEditPatchPlanSchema } from "@trojanbox-vcp-test/contracts";
+import { toInternalOperationRequest, toSiteEditEvent, toSiteEditObjectContentDetail, toSiteEditObjectDetail, toSiteEditObjectEditContext, toSiteEditObjectMediaDetail, toSiteEditObjectStyleDetail, toSiteEditObjectSummary, toSiteEditOperationResult, toSiteEditRenderDocument, } from "./internal-adapter.js";
+import { createInternalEditEngine } from "./internal/runtime/InternalEditEngine.js";
+import { sha256ContentHash, SnapshotFileSystem, } from "./snapshot-file-system.js";
+export class SnapshotSiteEditEngineRuntime {
+    constructor(options) {
+        this.options = options;
+        this.fileSystem = new SnapshotFileSystem(options.files);
+        this.engine = this.createEngine(this.fileSystem);
+    }
+    get status() {
+        return this.engine.status;
+    }
+    async setActiveRoute(routeId) {
+        await this.engine.setActiveRoute(routeId);
+    }
+    getDocument(routeId) {
+        return toSiteEditRenderDocument(this.engine.getDocument(routeId), {
+            siteId: this.options.siteId,
+            snapshotId: this.options.snapshotId,
+        });
+    }
+    getObjectCapabilities(key, routeId) {
+        const detail = toSiteEditObjectDetail(this.engine.getRenderDetail(key, routeId));
+        return {
+            key: detail.key,
+            canUpdateText: detail.capabilities.canUpdateText,
+            canInsertChild: detail.capabilities.canInsertChild,
+            canMove: detail.capabilities.canMove,
+            canRemove: detail.capabilities.canRemove,
+            boundaryKind: detail.boundaryKind,
+            isOpaque: detail.isOpaque,
+        };
+    }
+    getObjectSummary(key, routeId) {
+        return toSiteEditObjectSummary(this.engine.getRenderDetail(key, routeId));
+    }
+    getObjectEditContext(key, routeId) {
+        return toSiteEditObjectEditContext(this.engine.getRenderDetail(key, routeId));
+    }
+    getObjectStyleDetail(key, routeId) {
+        return toSiteEditObjectStyleDetail(this.engine.getRenderDetail(key, routeId));
+    }
+    getObjectContentDetail(key, routeId) {
+        return toSiteEditObjectContentDetail(this.engine.getRenderDetail(key, routeId));
+    }
+    getObjectMediaDetail(key, routeId) {
+        return toSiteEditObjectMediaDetail(this.engine.getRenderDetail(key, routeId));
+    }
+    getClassNameSource(key, routeId) {
+        return this.engine.getClassNameSource(key, routeId);
+    }
+    setClassNameSource(request) {
+        return this.engine.setClassNameSource(request);
+    }
+    async planOperation(request) {
+        const scratchFileSystem = new SnapshotFileSystem(this.options.files);
+        const scratchEngine = this.createEngine(scratchFileSystem);
+        for (const route of this.options.routes) {
+            await scratchEngine.setActiveRoute(route.routeId);
+        }
+        const result = toSiteEditOperationResult(await scratchEngine.execute(toInternalOperationRequest(request)));
+        if (!result.ok) {
+            return { result };
+        }
+        const changedFiles = scratchFileSystem.getChangedFiles();
+        if (changedFiles.length === 0) {
+            return { result };
+        }
+        const patchPlan = SiteEditPatchPlanSchema.parse({
+            siteId: request.siteId,
+            baseSnapshotId: request.baseSnapshotId,
+            operationId: request.id,
+            reason: `site-edit:${request.kind}`,
+            patches: changedFiles.map((file) => ({
+                path: file.path,
+                operation: file.before === undefined ? "create" : "update",
+                expectedHash: file.before === undefined
+                    ? undefined
+                    : sha256ContentHash(file.before),
+                fullContent: file.after,
+            })),
+            changedRouteIds: this.getChangedRouteIds(changedFiles.map((file) => file.path)),
+            diagnostics: [],
+        });
+        this.options.onEvent?.({
+            type: "site-edit.operation.planned",
+            siteId: request.siteId,
+            operationId: request.id,
+            baseSnapshotId: request.baseSnapshotId,
+            changedFiles: patchPlan.patches.map((patch) => patch.path),
+            at: new Date().toISOString(),
+        });
+        return { result, patchPlan };
+    }
+    dispose() {
+        this.engine.dispose();
+    }
+    createEngine(fileSystem) {
+        return createInternalEditEngine({
+            projectRoot: "/snapshot",
+            fileSystem,
+            routes: this.options.routes.map((route) => ({
+                routeId: route.routeId,
+                entryFile: route.entryFile,
+            })),
+            onEvent: this.options.onEvent
+                ? (event) => {
+                    const siteEditEvent = toSiteEditEvent(event, {
+                        siteId: this.options.siteId,
+                        snapshotId: this.options.snapshotId,
+                    });
+                    if (siteEditEvent) {
+                        this.options.onEvent?.(siteEditEvent);
+                    }
+                }
+                : undefined,
+            dev: this.options.dev,
+        });
+    }
+    getChangedRouteIds(changedPaths) {
+        const changedPathSet = new Set(changedPaths);
+        const directlyChangedRoutes = this.options.routes
+            .filter((route) => changedPathSet.has(route.entryFile))
+            .map((route) => route.routeId);
+        if (directlyChangedRoutes.length > 0) {
+            return directlyChangedRoutes;
+        }
+        return this.options.routes.map((route) => route.routeId);
+    }
+}
+export function createSiteEditEngineRuntime(options) {
+    return new SnapshotSiteEditEngineRuntime(options);
+}

package/dist/site-edit-instrumentation.d.ts

@@ -0,0 +1,19 @@
+import type { SiteEditRuntimeAttributes } from "./runtime-sync.js";
+export type SiteEditInstrumentationOptions = {
+    source: string;
+    file: string;
+    projectRoot?: string;
+    attributes?: SiteEditRuntimeAttributes;
+};
+export type SiteEditInstrumentedElement = {
+    key: string;
+    tag: string;
+    componentName: string;
+    sourceFile: string;
+    source_kind: "jsx" | "component-call";
+};
+export type SiteEditInstrumentationResult = {
+    code: string;
+    elements: SiteEditInstrumentedElement[];
+};
+export declare function instrumentSiteEditRuntimeAttributes(options: SiteEditInstrumentationOptions): SiteEditInstrumentationResult;

package/dist/site-edit-instrumentation.js

@@ -0,0 +1,322 @@
+import generateModule from "@babel/generator";
+import * as parser from "@babel/parser";
+import _traverse from "@babel/traverse";
+import * as t from "@babel/types";
+import { computeSiteEditSourceIdentityKey } from "@trojanbox-vcp-test/contracts";
+import { SITE_EDIT_RUNTIME_ATTRIBUTES } from "./runtime-sync.js";
+const generate = (typeof generateModule === "function"
+    ? generateModule
+    : generateModule.default);
+const traverse = (typeof _traverse === "function" ? _traverse : _traverse.default);
+const NON_EDITABLE_INTRINSIC_ELEMENTS = new Set([
+    "base",
+    "body",
+    "head",
+    "html",
+    "link",
+    "meta",
+    "noscript",
+    "script",
+    "style",
+    "template",
+    "title",
+]);
+const SUPPRESS_HYDRATION_WARNING_PROP = "suppressHydrationWarning";
+export function instrumentSiteEditRuntimeAttributes(options) {
+    if (!mayContainJsx(options.source)) {
+        return { code: options.source, elements: [] };
+    }
+    const attributes = options.attributes ?? SITE_EDIT_RUNTIME_ATTRIBUTES;
+    const ast = parser.parse(options.source, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript"],
+    });
+    const elements = [];
+    const sourceFile = toProjectRelativeFile(options.file, options.projectRoot);
+    traverse(ast, {
+        JSXElement(path) {
+            const opening = path.node.openingElement;
+            const name = opening.name;
+            if (!isSiteEditMarkableElement(name) ||
+                hasAttribute(opening, attributes.key)) {
+                return;
+            }
+            const componentName = findOwningComponentName(path) ?? "default";
+            const structuralPath = computeStructuralPathFromAst(path);
+            const key = computeSiteEditSourceIdentityKey(sourceFile, componentName, structuralPath);
+            const tag = getJsxElementName(name) ?? "unknown";
+            const sourceKind = isConcreteElement(name) ? "jsx" : "component-call";
+            if (sourceKind === "component-call" &&
+                !hasStructuredChild(path.node.children)) {
+                return;
+            }
+            appendStringAttribute(opening, attributes.key, key);
+            appendBooleanAttribute(opening, SUPPRESS_HYDRATION_WARNING_PROP);
+            elements.push({
+                key,
+                tag,
+                componentName: componentName,
+                sourceFile: sourceFile,
+                source_kind: sourceKind,
+            });
+        },
+    });
+    return {
+        code: generate(ast, { jsescOption: { minimal: true } }).code,
+        elements,
+    };
+}
+function mayContainJsx(source) {
+    return source.includes("<");
+}
+function toProjectRelativeFile(filename, projectRoot) {
+    const normalized = filename.replace(/\\/g, "/").replace(/^\.\//, "");
+    const normalizedRoot = projectRoot?.replace(/\\/g, "/").replace(/\/+$/, "");
+    if (normalizedRoot && normalized.startsWith(`${normalizedRoot}/`)) {
+        return normalized.slice(normalizedRoot.length + 1);
+    }
+    for (const [marker, offset] of [
+        ["/src/app/", 1],
+        ["/src/components/", 1],
+        ["/app/", 1],
+        ["/components/", 1],
+    ]) {
+        const index = normalized.indexOf(marker);
+        if (index >= 0) {
+            return normalized.slice(index + offset);
+        }
+    }
+    const fallback = normalized.match(/(?:^|\/)((?:src\/app|src\/components|app|components)\/.+)$/);
+    return fallback?.[1] ?? normalized;
+}
+function isConcreteElement(name) {
+    return t.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+}
+function getJsxElementName(name) {
+    if (t.isJSXIdentifier(name)) {
+        return name.name;
+    }
+    if (t.isJSXMemberExpression(name)) {
+        return getJsxMemberExpressionName(name);
+    }
+    return null;
+}
+function isSiteEditMarkableElement(name) {
+    const elementName = getJsxElementName(name);
+    if (!elementName ||
+        elementName === "Fragment" ||
+        elementName.endsWith(".Fragment")) {
+        return false;
+    }
+    return !NON_EDITABLE_INTRINSIC_ELEMENTS.has(elementName);
+}
+function hasAttribute(opening, name) {
+    return opening.attributes.some((attribute) => t.isJSXAttribute(attribute) &&
+        t.isJSXIdentifier(attribute.name, { name }));
+}
+function appendStringAttribute(opening, name, value) {
+    opening.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(value)));
+}
+function appendOptionalStringAttribute(opening, name, value) {
+    if (value === undefined || hasAttribute(opening, name)) {
+        return;
+    }
+    appendStringAttribute(opening, name, value);
+}
+function appendBooleanAttribute(opening, name) {
+    if (hasAttribute(opening, name)) {
+        return;
+    }
+    opening.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), null));
+}
+function getJsxMemberExpressionName(name) {
+    const objectName = t.isJSXIdentifier(name.object)
+        ? name.object.name
+        : getJsxMemberExpressionName(name.object);
+    return `${objectName}.${name.property.name}`;
+}
+function findOwningComponentName(path) {
+    let current = path;
+    while (current) {
+        if (current.isFunctionDeclaration() || current.isClassDeclaration()) {
+            return current.node.id?.name ?? null;
+        }
+        if (current.isVariableDeclarator() && t.isIdentifier(current.node.id)) {
+            const init = current.get("init");
+            if (!Array.isArray(init) &&
+                (init.isArrowFunctionExpression() || init.isFunctionExpression())) {
+                return current.node.id.name;
+            }
+        }
+        current = current.parentPath;
+    }
+    return null;
+}
+function hasStructuredChild(children) {
+    return children.some((child) => t.isJSXElement(child) || t.isJSXFragment(child));
+}
+const structuralPathCache = new WeakMap();
+const structuralChildrenCache = new WeakMap();
+const siblingOrdinalCache = new WeakMap();
+function computeStructuralPathFromAst(path) {
+    const cached = structuralPathCache.get(path.node);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const segments = [];
+    let current = path;
+    while (current) {
+        if (current.isJSXElement()) {
+            const segment = getStructuralSegment(current);
+            if (segment) {
+                segments.unshift(segment);
+            }
+        }
+        current = current.parentPath;
+    }
+    const structuralPath = segments.join("/");
+    structuralPathCache.set(path.node, structuralPath);
+    return structuralPath;
+}
+function getStructuralSegment(path) {
+    const tag = getJsxElementName(path.node.openingElement.name);
+    if (!tag || tag === "Fragment" || tag.endsWith(".Fragment")) {
+        return null;
+    }
+    if (/^[A-Z]/.test(tag)) {
+        return `component:${tag}#${computeSiblingOrdinal(path, tag)}`;
+    }
+    return `${tag}#${computeSiblingOrdinal(path, tag)}`;
+}
+function computeSiblingOrdinal(path, tag) {
+    const owner = findStructuralParent(path);
+    if (!owner) {
+        return 0;
+    }
+    const cached = siblingOrdinalCache.get(owner.node)?.get(tag)?.get(path.node);
+    if (cached !== undefined) {
+        return cached;
+    }
+    let ownerCache = siblingOrdinalCache.get(owner.node);
+    if (!ownerCache) {
+        ownerCache = new Map();
+        siblingOrdinalCache.set(owner.node, ownerCache);
+    }
+    let tagOrdinals = ownerCache.get(tag);
+    if (!tagOrdinals) {
+        tagOrdinals = new WeakMap();
+        ownerCache.set(tag, tagOrdinals);
+    }
+    let ordinal = 0;
+    for (const sibling of collectStructuralChildren(owner)) {
+        const siblingTag = getJsxElementName(sibling.node.openingElement.name);
+        if (siblingTag === tag) {
+            tagOrdinals.set(sibling.node, ordinal);
+            if (sibling.node === path.node) {
+                return ordinal;
+            }
+            ordinal += 1;
+        }
+    }
+    return tagOrdinals.get(path.node) ?? 0;
+}
+function findStructuralParent(path) {
+    let current = path.parentPath;
+    let fragmentOwner = null;
+    while (current) {
+        if (current.isJSXFragment()) {
+            fragmentOwner = current;
+            current = current.parentPath;
+            continue;
+        }
+        if (current.isJSXElement()) {
+            return current;
+        }
+        current = current.parentPath;
+    }
+    return fragmentOwner;
+}
+function collectStructuralChildren(owner) {
+    const cached = structuralChildrenCache.get(owner.node);
+    if (cached) {
+        return cached;
+    }
+    const structuralChildren = [];
+    const children = owner.get("children");
+    for (const child of children) {
+        if (Array.isArray(child)) {
+            continue;
+        }
+        if (child.isJSXElement()) {
+            structuralChildren.push(child);
+            continue;
+        }
+        if (child.isJSXFragment()) {
+            structuralChildren.push(...collectStructuralChildren(child));
+            continue;
+        }
+        if (child.isJSXExpressionContainer()) {
+            structuralChildren.push(...collectExpressionStructuralChildren(child.get("expression")));
+        }
+    }
+    structuralChildrenCache.set(owner.node, structuralChildren);
+    return structuralChildren;
+}
+function collectExpressionStructuralChildren(expression) {
+    if (expression.isJSXElement()) {
+        return [expression];
+    }
+    if (expression.isJSXFragment()) {
+        return collectStructuralChildren(expression);
+    }
+    if (expression.isParenthesizedExpression()) {
+        return collectExpressionStructuralChildren(expression.get("expression"));
+    }
+    if (expression.isLogicalExpression() && expression.node.operator === "&&") {
+        return collectExpressionStructuralChildren(expression.get("right"));
+    }
+    if (expression.isConditionalExpression()) {
+        return [
+            ...collectExpressionStructuralChildren(expression.get("consequent")),
+            ...collectExpressionStructuralChildren(expression.get("alternate")),
+        ];
+    }
+    if (expression.isCallExpression() && isMapCallExpression(expression.node)) {
+        const callback = expression.get("arguments")[0];
+        return collectFunctionReturnStructuralChildren(callback);
+    }
+    return [];
+}
+function collectFunctionReturnStructuralChildren(path) {
+    if (!path.isArrowFunctionExpression() && !path.isFunctionExpression()) {
+        return [];
+    }
+    const body = path.get("body");
+    if (body.isJSXElement()) {
+        return [body];
+    }
+    if (body.isJSXFragment()) {
+        return collectStructuralChildren(body);
+    }
+    if (body.isParenthesizedExpression()) {
+        return collectExpressionStructuralChildren(body.get("expression"));
+    }
+    if (!body.isBlockStatement()) {
+        return [];
+    }
+    for (const statement of body.get("body")) {
+        if (!statement.isReturnStatement()) {
+            continue;
+        }
+        const argument = statement.get("argument");
+        return argument.node
+            ? collectExpressionStructuralChildren(argument)
+            : [];
+    }
+    return [];
+}
+function isMapCallExpression(node) {
+    return (t.isMemberExpression(node.callee) &&
+        t.isIdentifier(node.callee.property) &&
+        node.callee.property.name === "map");
+}

package/dist/snapshot-file-system.d.ts

@@ -0,0 +1,19 @@
+import type { ProjectFileSystem } from "./internal/types.js";
+import type { SiteEditSnapshotFile } from "./types.js";
+export declare class SnapshotFileSystem implements ProjectFileSystem {
+    private readonly original;
+    private readonly files;
+    private readonly versions;
+    constructor(files: SiteEditSnapshotFile[]);
+    readFile(file: string): Promise<string>;
+    writeFile(file: string, content: string): Promise<void>;
+    exists(file: string): Promise<boolean>;
+    getVersion(file: string): number;
+    bumpVersion(file: string): number;
+    getChangedFiles(): Array<{
+        path: string;
+        before?: string;
+        after?: string;
+    }>;
+}
+export declare function sha256ContentHash(content: string): `sha256:${string}`;

package/dist/snapshot-file-system.js

@@ -0,0 +1,49 @@
+import { createHash } from "node:crypto";
+export class SnapshotFileSystem {
+    constructor(files) {
+        this.original = new Map();
+        this.files = new Map();
+        this.versions = new Map();
+        for (const file of files) {
+            this.original.set(file.path, file.content);
+            this.files.set(file.path, file.content);
+            this.versions.set(file.path, file.version ?? 0);
+        }
+    }
+    async readFile(file) {
+        const content = this.files.get(file);
+        if (content === undefined) {
+            throw new Error(`Snapshot file not found: ${file}`);
+        }
+        return content;
+    }
+    async writeFile(file, content) {
+        this.files.set(file, content);
+    }
+    async exists(file) {
+        return this.files.has(file);
+    }
+    getVersion(file) {
+        return this.versions.get(file) ?? 0;
+    }
+    bumpVersion(file) {
+        const next = this.getVersion(file) + 1;
+        this.versions.set(file, next);
+        return next;
+    }
+    getChangedFiles() {
+        const paths = new Set([...this.original.keys(), ...this.files.keys()]);
+        const changes = [];
+        for (const path of [...paths].sort()) {
+            const before = this.original.get(path);
+            const after = this.files.get(path);
+            if (before !== after) {
+                changes.push({ path, before, after });
+            }
+        }
+        return changes;
+    }
+}
+export function sha256ContentHash(content) {
+    return `sha256:${createHash("sha256").update(content).digest("hex")}`;
+}

package/dist/source-watcher.d.ts

@@ -0,0 +1,20 @@
+export type SiteEditSourceWatcherOptions = {
+    projectRoot: string;
+    watch_dirs?: string[];
+    interval_ms?: number;
+    on_change(file: string): void;
+};
+export declare class SiteEditSourceWatcher {
+    private readonly options;
+    private readonly watchers;
+    private readonly fileMtimes;
+    private pollingTimer;
+    private isPolling;
+    constructor(options: SiteEditSourceWatcherOptions);
+    start(): () => void;
+    stop(): void;
+    private getWatchDirs;
+    private registerWatcher;
+    private poll;
+    private scanFiles;
+}