@dcoder-x/plugin-shared 0.1.2 → 0.1.4

package/dist/upload/BackendAdapter.d.ts

@@ -0,0 +1,30 @@
+import type { PolicyArtifacts } from '../types';
+export interface SiteComponentRegistryUpload {
+    domain: string;
+    components: {
+        version: string;
+        generatedAt: string;
+        selectors: Array<{
+            clippyId: string;
+            selector: string;
+            tag: string;
+            component: string;
+            file: string;
+            attributes?: Array<{
+                name: string;
+                value: string | null;
+            }>;
+        }>;
+        components: Array<{
+            name: string;
+            file: string;
+            stateVariables?: any[];
+            interactions?: any[];
+            conditionalRenders?: any[];
+            effects?: any[];
+            contextUsages?: any[];
+        }>;
+    };
+}
+export declare function mapArtifactsToSiteRegistry(artifacts: PolicyArtifacts, domain: string): SiteComponentRegistryUpload;
+export default mapArtifactsToSiteRegistry;

package/dist/upload/BackendAdapter.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapArtifactsToSiteRegistry = mapArtifactsToSiteRegistry;
+// Convert internal PolicyArtifacts -> backend SiteComponentRegistryUpload.
+// This is intentionally a best-effort mapping: the plugin has richer
+// fields (routes, flows, selector candidates). The adapter flattens
+// and retains the core selectors/components the backend requires.
+function mapArtifactsToSiteRegistry(artifacts, domain) {
+    const generatedAt = artifacts.metadata.generatedAt;
+    const selectors = (artifacts.policy.selectors || []).map((s) => ({
+        clippyId: s.clippyId,
+        selector: s.selector,
+        tag: s.tag,
+        component: s.component,
+        file: s.filePath,
+        attributes: s.attributes || [],
+    }));
+    const components = (artifacts.policy.components || []).map((c) => ({
+        name: c.name,
+        file: c.filePath,
+        stateVariables: c.stateVariables || [],
+        interactions: c.interactions || [],
+        // Best-effort placeholders: preserve array shape expected by backend.
+        conditionalRenders: [],
+        effects: (c.interactions || []).map((it) => ({
+            dependencies: [],
+            asyncCalls: [],
+            runsOnMount: false,
+        })),
+        contextUsages: [],
+    }));
+    return {
+        domain,
+        components: {
+            version: artifacts.metadata.version,
+            generatedAt,
+            selectors,
+            components,
+        },
+    };
+}
+exports.default = mapArtifactsToSiteRegistry;

package/dist/upload/BackendUploadAdapter.d.ts

@@ -0,0 +1,13 @@
+import type { PolicyArtifacts, UploadResult } from '../types';
+export interface BackendUploadOptions {
+    /** Full URL to POST the SiteComponentRegistryUpload to, e.g. http://localhost:3000/website/registry */
+    url: string;
+    /** Authorization header value (full header string, e.g. 'Bearer ...') */
+    authorization?: string;
+    /** Domain to include in the payload (required by backend contract) */
+    domain: string;
+}
+export declare function createBackendUploadAdapter(opts: BackendUploadOptions): {
+    uploadArtifacts(artifacts: PolicyArtifacts): Promise<UploadResult>;
+};
+export default createBackendUploadAdapter;

package/dist/upload/BackendUploadAdapter.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBackendUploadAdapter = createBackendUploadAdapter;
+const BackendAdapter_1 = require("./BackendAdapter");
+function createBackendUploadAdapter(opts) {
+    if (!opts || !opts.url)
+        throw new Error('BackendUploadAdapter requires a target url');
+    if (!opts.domain)
+        throw new Error('BackendUploadAdapter requires a domain');
+    return {
+        async uploadArtifacts(artifacts) {
+            const payload = (0, BackendAdapter_1.mapArtifactsToSiteRegistry)(artifacts, opts.domain);
+            // Use global fetch when available (Node 18+), otherwise try dynamic import
+            const headers = { 'Content-Type': 'application/json' };
+            if (opts.authorization)
+                headers['authorization'] = opts.authorization;
+            if (typeof fetch === 'function') {
+                const res = await fetch(opts.url, {
+                    method: 'POST',
+                    headers,
+                    body: JSON.stringify(payload),
+                });
+                return {
+                    skipped: false,
+                    policyUploaded: res.ok,
+                    selectorsUploaded: res.ok,
+                    mode: 'single',
+                };
+            }
+            // Fallback to http/https
+            const { URL } = await import('url');
+            const parsed = new URL(opts.url);
+            const lib = parsed.protocol === 'https:' ? await import('https') : await import('http');
+            return new Promise((resolve, reject) => {
+                const req = lib.request(opts.url, {
+                    method: 'POST',
+                    headers,
+                }, (res) => {
+                    const ok = res.statusCode && res.statusCode >= 200 && res.statusCode < 300;
+                    // consume body
+                    res.on('data', () => { });
+                    res.on('end', () => resolve({ skipped: false, policyUploaded: !!ok, selectorsUploaded: !!ok, mode: 'single' }));
+                });
+                req.on('error', (err) => reject(err));
+                req.write(JSON.stringify(payload));
+                req.end();
+            });
+        },
+    };
+}
+exports.default = createBackendUploadAdapter;

package/dist/upload/PackageBuilder.d.ts

@@ -1,5 +1,36 @@
-import type { KnowledgePackage } from '../types';
+import type { ElementWithSelectors, InferredFlow, KnowledgePackage, PolicyArtifacts, PolicyComponent, PolicyDocument, PolicySelectorEntry, SelectorManifest, DiscoveredRoute } from '../types';
 export declare class PackageBuilder {
+    private version;
     buildPackage(data: Omit<KnowledgePackage, 'generatedAt'>): KnowledgePackage;
+    buildArtifacts(data: {
+        buildId: string;
+        bundler: 'webpack' | 'vite';
+        routes: DiscoveredRoute[];
+        selectors: ElementWithSelectors[];
+        flows: InferredFlow[];
+        components?: PolicyComponent[];
+    }): PolicyArtifacts;
+    buildPolicyDocument(data: {
+        buildId: string;
+        generatedAt: string;
+        bundler: 'webpack' | 'vite';
+        routes: DiscoveredRoute[];
+        selectors: ElementWithSelectors[];
+        flows: InferredFlow[];
+        components?: PolicyComponent[];
+    }): PolicyDocument;
+    buildSelectorManifest(data: {
+        buildId: string;
+        generatedAt: string;
+        selectors: PolicySelectorEntry[];
+    }): SelectorManifest;
     build(data: Omit<KnowledgePackage, 'generatedAt'>): Buffer;
+    buildArtifactsBuffer(artifacts: PolicyArtifacts): Buffer;
+    private toPolicySelectors;
+    private toPolicyComponents;
+    private toPolicyFlows;
+    private deriveComponentName;
+    private deriveStableId;
+    private extractClippyIdFromSelector;
+    private simpleHash;
 }

package/dist/upload/PackageBuilder.js

@@ -5,16 +5,159 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PackageBuilder = void 0;
 const zlib_1 = __importDefault(require("zlib"));
+const IdStrategy_1 = require("../injection/IdStrategy");
 class PackageBuilder {
+    constructor() {
+        this.version = '1.0.0';
+    }
     buildPackage(data) {
         return {
             ...data,
             generatedAt: new Date().toISOString(),
         };
     }
+    buildArtifacts(data) {
+        const generatedAt = new Date().toISOString();
+        const policy = this.buildPolicyDocument({
+            ...data,
+            generatedAt,
+        });
+        const selectorManifest = this.buildSelectorManifest({
+            buildId: data.buildId,
+            generatedAt,
+            selectors: policy.selectors,
+        });
+        return {
+            metadata: {
+                version: this.version,
+                buildId: data.buildId,
+                generatedAt,
+                bundler: data.bundler,
+            },
+            policy,
+            selectorManifest,
+        };
+    }
+    buildPolicyDocument(data) {
+        const policySelectors = this.toPolicySelectors(data.selectors);
+        return {
+            version: this.version,
+            buildId: data.buildId,
+            generatedAt: data.generatedAt,
+            bundler: data.bundler,
+            routes: data.routes,
+            selectors: policySelectors,
+            components: data.components ?? this.toPolicyComponents(data.selectors),
+            flows: this.toPolicyFlows(data.flows, data.routes, policySelectors),
+        };
+    }
+    buildSelectorManifest(data) {
+        const selectors = data.selectors.map((entry) => ({
+            id: entry.clippyId,
+            selector: entry.selector,
+            component: entry.component,
+            tag: entry.tag,
+            route: entry.route,
+        }));
+        return {
+            version: this.version,
+            buildId: data.buildId,
+            generatedAt: data.generatedAt,
+            selectors,
+        };
+    }
     build(data) {
         const pkg = this.buildPackage(data);
         return zlib_1.default.gzipSync(JSON.stringify(pkg));
     }
+    buildArtifactsBuffer(artifacts) {
+        return zlib_1.default.gzipSync(JSON.stringify(artifacts));
+    }
+    toPolicySelectors(selectors) {
+        return selectors.map((element, index) => {
+            const component = (0, IdStrategy_1.deriveComponentName)(element.filePath);
+            const preferred = element.selectors.find((candidate) => candidate.type === 'clippy_id') ||
+                element.selectors[0];
+            const stableLine = element.loc?.line ?? index;
+            const clippyId = preferred?.type === 'clippy_id'
+                ? this.extractClippyIdFromSelector(preferred.value) ||
+                    this.deriveStableId(component, element.tag, stableLine)
+                : this.deriveStableId(component, element.tag, stableLine);
+            const selector = preferred?.value ||
+                `[data-clippy-id='${clippyId}']`;
+            return {
+                clippyId,
+                selector,
+                tag: element.tag,
+                component,
+                route: element.route,
+                filePath: element.filePath,
+                attributes: Object.entries(element.staticProps).map(([name, value]) => ({ name, value })),
+                candidates: element.selectors,
+            };
+        });
+    }
+    toPolicyComponents(selectors) {
+        const byFile = new Map();
+        for (const element of selectors) {
+            if (!byFile.has(element.filePath))
+                byFile.set(element.filePath, []);
+            byFile.get(element.filePath).push(element);
+        }
+        return Array.from(byFile.entries()).map(([filePath, items]) => {
+            const componentName = this.deriveComponentName(filePath);
+            const route = items[0]?.route || '/';
+            return {
+                name: componentName,
+                filePath,
+                route,
+                stateVariables: [],
+                interactions: [],
+            };
+        });
+    }
+    toPolicyFlows(flows, routes, selectors) {
+        return flows.map((flow, flowIndex) => {
+            const firstRoute = flow.steps[0] || '/';
+            const page = flow.page || routes.find((route) => route.path === firstRoute)?.path || firstRoute;
+            const hasInteraction = flow.edges.some((edge) => edge.from === edge.to && edge.trigger?.startsWith('on'));
+            const steps = flow.steps.map((routePath, stepIndex) => {
+                const target = selectors.find((entry) => entry.route === routePath)?.selector ||
+                    `[data-clippy-route='${routePath}']`;
+                return {
+                    step: stepIndex + 1,
+                    action: stepIndex === 0
+                        ? hasInteraction
+                            ? 'interact'
+                            : 'navigate'
+                        : 'transition',
+                    target,
+                };
+            });
+            return {
+                flowId: flow.id || `flow_${flowIndex + 1}`,
+                page,
+                intentPatterns: [flow.name.toLowerCase()],
+                steps,
+            };
+        });
+    }
+    deriveComponentName(filePath) {
+        return (0, IdStrategy_1.deriveComponentName)(filePath);
+    }
+    deriveStableId(component, tag, line) {
+        return (0, IdStrategy_1.deriveClippyId)(component, tag, line);
+    }
+    extractClippyIdFromSelector(selector) {
+        const match = selector.match(/\[data-clippy-id=['\"]([^'\"]+)['\"]\]/);
+        return match?.[1] || null;
+    }
+    simpleHash(input) {
+        let hash = 0;
+        for (let i = 0; i < input.length; i++) {
+            hash = (hash * 31 + input.charCodeAt(i)) >>> 0;
+        }
+        return hash.toString(36);
+    }
 }
 exports.PackageBuilder = PackageBuilder;

package/dist/upload/PackageWriter.d.ts

@@ -1,7 +1,15 @@
-import type { KnowledgePackage } from '../types';
+import type { KnowledgePackage, PolicyArtifacts } from '../types';
 export declare class PackageWriter {
     write(outputDir: string, knowledgePackage: KnowledgePackage): {
         jsonPath: string;
         gzipPath: string;
     };
+    writeArtifacts(outputDir: string, artifacts: PolicyArtifacts, options?: {
+        gzip?: boolean;
+    }): {
+        policyPath: string;
+        selectorsPath: string;
+        policyGzipPath?: string;
+        selectorsGzipPath?: string;
+    };
 }

package/dist/upload/PackageWriter.js

@@ -18,5 +18,31 @@ class PackageWriter {
         fs_1.default.writeFileSync(gzipPath, zlib_1.default.gzipSync(content));
         return { jsonPath, gzipPath };
     }
+    writeArtifacts(outputDir, artifacts, options) {
+        fs_1.default.mkdirSync(outputDir, { recursive: true });
+        const policyPath = path_1.default.join(outputDir, 'clippy-policy.json');
+        const selectorsPath = path_1.default.join(outputDir, 'clippy-selectors.json');
+        const policyContent = JSON.stringify(artifacts.policy, null, 2);
+        const selectorsContent = JSON.stringify(artifacts.selectorManifest, null, 2);
+        fs_1.default.writeFileSync(policyPath, policyContent, 'utf-8');
+        fs_1.default.writeFileSync(selectorsPath, selectorsContent, 'utf-8');
+        const shouldGzip = options?.gzip ?? true;
+        if (!shouldGzip) {
+            return {
+                policyPath,
+                selectorsPath,
+            };
+        }
+        const policyGzipPath = `${policyPath}.gz`;
+        const selectorsGzipPath = `${selectorsPath}.gz`;
+        fs_1.default.writeFileSync(policyGzipPath, zlib_1.default.gzipSync(policyContent));
+        fs_1.default.writeFileSync(selectorsGzipPath, zlib_1.default.gzipSync(selectorsContent));
+        return {
+            policyPath,
+            selectorsPath,
+            policyGzipPath,
+            selectorsGzipPath,
+        };
+    }
 }
 exports.PackageWriter = PackageWriter;

package/dist/upload/UploadStrategy.d.ts

@@ -0,0 +1,11 @@
+import type { PolicyArtifacts } from '../types';
+export interface ArtifactRequest {
+    endpoint: string;
+    payload: Buffer;
+    extraHeaders?: Record<string, string>;
+}
+declare const POLICY_ENDPOINT = "https://api.clippy.dev/v1/policy";
+declare const SELECTORS_ENDPOINT = "https://api.clippy.dev/v1/selectors";
+declare const BUNDLE_ENDPOINT = "https://api.clippy.dev/v1/policy-artifacts";
+export declare function buildArtifactRequests(artifacts: PolicyArtifacts, mode: 'single' | 'split'): ArtifactRequest[];
+export { POLICY_ENDPOINT, SELECTORS_ENDPOINT, BUNDLE_ENDPOINT };

package/dist/upload/UploadStrategy.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUNDLE_ENDPOINT = exports.SELECTORS_ENDPOINT = exports.POLICY_ENDPOINT = void 0;
+exports.buildArtifactRequests = buildArtifactRequests;
+const zlib_1 = __importDefault(require("zlib"));
+const POLICY_ENDPOINT = 'https://api.clippy.dev/v1/policy';
+exports.POLICY_ENDPOINT = POLICY_ENDPOINT;
+const SELECTORS_ENDPOINT = 'https://api.clippy.dev/v1/selectors';
+exports.SELECTORS_ENDPOINT = SELECTORS_ENDPOINT;
+const BUNDLE_ENDPOINT = 'https://api.clippy.dev/v1/policy-artifacts';
+exports.BUNDLE_ENDPOINT = BUNDLE_ENDPOINT;
+function buildArtifactRequests(artifacts, mode) {
+    if (mode === 'split') {
+        const policyPayload = zlib_1.default.gzipSync(JSON.stringify(artifacts.policy));
+        const selectorsPayload = zlib_1.default.gzipSync(JSON.stringify(artifacts.selectorManifest));
+        return [
+            {
+                endpoint: POLICY_ENDPOINT,
+                payload: policyPayload,
+                extraHeaders: { 'X-Clippy-Artifact': 'policy' },
+            },
+            {
+                endpoint: SELECTORS_ENDPOINT,
+                payload: selectorsPayload,
+                extraHeaders: { 'X-Clippy-Artifact': 'selectors' },
+            },
+        ];
+    }
+    const bundle = zlib_1.default.gzipSync(JSON.stringify(artifacts));
+    return [
+        {
+            endpoint: BUNDLE_ENDPOINT,
+            payload: bundle,
+            extraHeaders: { 'X-Clippy-Artifact': 'bundle' },
+        },
+    ];
+}

package/dist/upload/Uploader.d.ts

@@ -1,10 +1,15 @@
-import type { ClippyPluginOptions } from '../types';
+import type { ClippyPluginOptions, PolicyArtifacts, UploadResult } from '../types';
 export declare class Uploader {
     private options;
     private endpoint;
+    private policyArtifactsEndpoint;
+    private policyEndpoint;
+    private selectorsEndpoint;
     private requestTimeoutMs;
     private maxAttempts;
     constructor(options: ClippyPluginOptions);
     upload(compressedPackage: Buffer): Promise<boolean>;
+    uploadArtifacts(artifacts: PolicyArtifacts): Promise<UploadResult>;
+    private uploadWithRetry;
     private uploadOnce;
 }

package/dist/upload/Uploader.js

@@ -5,10 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Uploader = void 0;
 const https_1 = __importDefault(require("https"));
+const UploadStrategy_1 = require("./UploadStrategy");
 class Uploader {
     constructor(options) {
         this.options = options;
         this.endpoint = 'https://api.clippy.dev/v1/knowledge';
+        this.policyArtifactsEndpoint = 'https://api.clippy.dev/v1/policy-artifacts';
+        this.policyEndpoint = 'https://api.clippy.dev/v1/policy';
+        this.selectorsEndpoint = 'https://api.clippy.dev/v1/selectors';
         this.requestTimeoutMs = 10000;
         this.maxAttempts = 3;
     }
@@ -18,7 +22,7 @@ class Uploader {
         let lastError = null;
         for (let attempt = 1; attempt <= this.maxAttempts; attempt++) {
             try {
-                await this.uploadOnce(compressedPackage);
+                await this.uploadOnce(this.endpoint, compressedPackage);
                 return true;
             }
             catch (err) {
@@ -30,7 +34,47 @@ class Uploader {
         }
         throw lastError || new Error('Upload failed after retries');
     }
-    async uploadOnce(compressedPackage) {
+    async uploadArtifacts(artifacts) {
+        if (this.options.skipUpload) {
+            return {
+                skipped: true,
+                policyUploaded: false,
+                selectorsUploaded: false,
+                mode: this.options.artifactUploadMode || 'single',
+            };
+        }
+        const mode = this.options.artifactUploadMode || 'single';
+        const requests = (0, UploadStrategy_1.buildArtifactRequests)(artifacts, mode);
+        for (const req of requests) {
+            await this.uploadWithRetry(req.endpoint, req.payload, {
+                ...(req.extraHeaders || {}),
+                'X-Build-Id': artifacts.metadata.buildId,
+            });
+        }
+        return {
+            skipped: false,
+            policyUploaded: true,
+            selectorsUploaded: true,
+            mode,
+        };
+    }
+    async uploadWithRetry(endpoint, payload, extraHeaders) {
+        let lastError = null;
+        for (let attempt = 1; attempt <= this.maxAttempts; attempt++) {
+            try {
+                await this.uploadOnce(endpoint, payload, extraHeaders);
+                return;
+            }
+            catch (err) {
+                lastError = err;
+                if (attempt < this.maxAttempts) {
+                    await delay(250 * Math.pow(2, attempt - 1));
+                }
+            }
+        }
+        throw lastError || new Error('Upload failed after retries');
+    }
+    async uploadOnce(endpoint, compressedPackage, extraHeaders) {
         return new Promise((resolve, reject) => {
             let settled = false;
             const finalize = (fn) => {
@@ -39,7 +83,7 @@ class Uploader {
                 settled = true;
                 fn();
             };
-            const req = https_1.default.request(this.endpoint, {
+            const req = https_1.default.request(endpoint, {
                 method: 'POST',
                 headers: {
                     Authorization: `Bearer ${this.options.apiKey}`,
@@ -47,6 +91,7 @@ class Uploader {
                     'Content-Type': 'application/octet-stream',
                     'Content-Encoding': 'gzip',
                     'Content-Length': compressedPackage.length,
+                    ...extraHeaders,
                 },
             }, (res) => {
                 if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcoder-x/plugin-shared",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",