@financial-times/custom-code-component 2.0.1-alpha.8 → 2.0.1-beta.1

package/src/path.ts

@@ -3,41 +3,37 @@ import { CCCError } from "./errors";
 export type ComponentPathType = {
   org: string;
   repo: string;
-  component: string;
+  name: string;
   versionRange: string;
 };
 export class ComponentPath {
-  org: string;
-  repo: string;
-  component: string;
+  org: string = "local";
+  repo: string = "dev";
+  name: string;
   versionRange: string;
 
   constructor(path: ComponentPathType | string) {
-    const { org, repo, component, versionRange } = isValidComponentPathObject(
-      path
-    )
+    const { org, repo, name, versionRange } = isValidComponentPathObject(path)
       ? path
       : ComponentPath.fromString(path);
-    this.org = org;
-    this.repo = repo;
-    this.component = component;
+    if (org) this.org = org;
+    if (repo) this.repo = repo;
+    this.name = name;
     this.versionRange = versionRange;
   }
 
   set path(path: ComponentPathType | string) {
-    const { org, repo, component, versionRange } = isValidComponentPathObject(
-      path
-    )
+    const { org, repo, name, versionRange } = isValidComponentPathObject(path)
       ? path
       : ComponentPath.fromString(path);
     this.org = org;
     this.repo = repo;
-    this.component = component;
+    this.name = name;
     this.versionRange = versionRange;
   }
 
   get path(): string {
-    return `${this.org}/${this.repo}@${this.versionRange}/${this.component}`;
+    return `${this.org}/${this.repo}@${this.versionRange}/${this.name}`;
   }
 
   toString(): string {
@@ -47,6 +43,11 @@ export class ComponentPath {
   static fromString(path: string | null, v?: string | null): ComponentPath {
     if (!path) throw new CCCError("No path specified");
 
+    const [name, repo, org] = path
+      .replace(/@[^\/]+/, "")
+      .split("/")
+      .reverse();
+
     const versionRange =
       v ??
       path
@@ -55,14 +56,9 @@ export class ComponentPath {
         .replace("@", "") ??
       "unknown";
 
-    if (!versionRange) throw new CCCError("No version specified");
-
-    const [component, repo, org] = path
-      .replace(/@[^\/]+/, "")
-      .split("/")
-      .reverse();
+    if (repo && !versionRange) throw new CCCError("No version specified");
 
-    return new ComponentPath({ org, repo, component, versionRange });
+    return new ComponentPath({ org, repo, name, versionRange });
   }
 }
 
@@ -76,7 +72,7 @@ export function isValidComponentPathObject(
   value: unknown
 ): value is ComponentPathType {
   if (typeof value === "object" && value !== null) {
-    return "org" in value && "repo" in value && "component" in value;
+    return "org" in value && "repo" in value && "name" in value;
   }
 
   return false;

package/dist/webcomponent/src/custom-code-component.d.ts

@@ -1,55 +0,0 @@
-/**
- * @file
- * Main component definition for custom-code-component
- */
-import type { ContentTree } from "@financial-times/content-tree";
-import { BaseRenderer } from "../../ccc-sdk/src/renderers/BaseRenderer";
-import Tracking from "./tracking";
-import { Logger } from "./logger";
-import { ComponentPath } from "./path";
-export declare class FTCustomCodeComponent extends HTMLElement {
-    app?: typeof BaseRenderer.prototype.render;
-    mode: "closed" | "open";
-    RESERVED_ATTRS: Set<string>;
-    source?: string;
-    tracking?: Tracking;
-    lightRoot: ChildNode[];
-    component: ComponentPath;
-    log: Logger;
-    constructor();
-    connectedCallback(): Promise<void>;
-    emitError(error: Error): void;
-    disconnectedCallback(): void;
-    channel: MessageChannel;
-    onmessage(): void;
-    onunmount(root?: any): void;
-    onready(app: Promise<void>): Promise<void>;
-    postMessage(event: any): void;
-    mount(prerendered?: ShadowRoot | null): Promise<void>;
-    unmount(e: Error): void;
-    load(): Promise<(shadowRoot: ShadowRoot, attrs: any, ssr?: boolean) => {
-        unmount: (root: any) => void;
-        onmessage: {
-            (...data: any[]): void;
-            (message?: any, ...optionalParams: any[]): void;
-        };
-        ready: Promise<void>;
-    }>;
-    initTracking: () => Promise<void>;
-}
-export interface CustomCodeComponent extends ContentTree.Node {
-    type: "CustomCodeComponent";
-    path: string;
-    versionRange: string;
-    altText: string;
-    lastModified: string;
-    fallbackImage?: ContentTree.Image;
-    displayFallbackText: boolean;
-    layout: "in-line" | "mid-grid" | "full-grid" | "full-bleed";
-    attributes: {
-        [key: string]: string | boolean | undefined;
-    } | {
-        children?: CustomCodeComponent | Array<CustomCodeComponent>;
-    };
-}
-export type { FTCustomCodeComponent as CCCHTMLElement };

package/dist/webcomponent/src/environment.d.ts

@@ -1,15 +0,0 @@
-/**
- * Assigns a test URL based on the provided testEnv value.
- *
- * @param testEnv - A string indicating test environment setting
- * @returns A `URL` object if valid and safe, or `undefined` if invalid.
- */
-export declare function assignTestURL(testEnv: string | null): URL | undefined;
-/**
- * Checks whether the given test URL can establish a successful WebSocket connection,
- * which indicates a live test environment (e.g., Vite HMR is active).
- *
- * @param testUrl - The test environment URL to check.
- * @returns A promise that resolves to true if WebSocket connection is open, otherwise false.
- */
-export declare function useComponentTestEnv(testUrl?: URL): Promise<boolean>;

package/dist/webcomponent/src/errors.d.ts

@@ -1,27 +0,0 @@
-/**
- * This is the base CCC component error class. These are raised when the component being loaded errors
- */
-import { ComponentPath, DetailType } from "./path";
-export declare class CCCError extends Error {
-    component: ComponentPath | null;
-    source?: string;
-    constructor(message: string | null, detail?: DetailType);
-}
-/**
- * This class is used to raise errors that occur during the import of the CCC component app
- */
-export declare class CCCImportError extends CCCError {
-    constructor(message: string, detail: DetailType);
-}
-/**
- * This class is used to raise errors that occur during the rendering of the CCC component app
- */
-export declare class CCCRenderError extends CCCError {
-    constructor(message: string, detail: DetailType);
-}
-/**
- * This class is used to raise errors that occur as a result of the CCC component app timing out
- */
-export declare class CCCTimeoutError extends CCCError {
-    constructor(detail: DetailType);
-}

package/dist/webcomponent/src/events.d.ts

@@ -1,10 +0,0 @@
-import { ComponentPath } from "./path";
-export declare class CCCConnectedEvent extends Event {
-    static eventType: string;
-    component: ComponentPath;
-    source?: string;
-    constructor(detail: {
-        component: ComponentPath;
-        source?: string;
-    }, opts?: EventInit);
-}

package/dist/webcomponent/src/get-trace.d.ts

@@ -1,8 +0,0 @@
-type PropMap = {
-    [k: string]: any;
-};
-export declare function getTrace(el: Element, rootEl: Element): {
-    trace: PropMap[];
-    customContext: {};
-};
-export {};

package/dist/webcomponent/src/logger.d.ts

@@ -1,20 +0,0 @@
-export declare const LogLevel: Readonly<{
-    DEBUG: 0;
-    INFO: 1;
-    WARN: 2;
-    ERROR: 3;
-    TEST: 4;
-    DEFAULT: 2;
-}>;
-export declare function convertStringLogLevel(value: string | null): 0 | 2 | 1 | 3 | 4;
-export declare class Logger {
-    level: number;
-    constructor({ level }?: {
-        level: number;
-    });
-    debug(...args: any[]): void;
-    log: (...args: any[]) => void;
-    info(...args: any[]): void;
-    warn(...args: any[]): void;
-    error(...args: any[]): void;
-}

package/dist/webcomponent/src/path.d.ts

@@ -1,23 +0,0 @@
-export type ComponentPathType = {
-    org: string;
-    repo: string;
-    component: string;
-    versionRange: string;
-};
-export declare class ComponentPath {
-    org: string;
-    repo: string;
-    component: string;
-    versionRange: string;
-    constructor(path: ComponentPathType | string);
-    set path(path: ComponentPathType | string);
-    get path(): string;
-    toString(): string;
-    static fromString(path: string | null, v?: string | null): ComponentPath;
-}
-export type DetailType = {
-    component: ComponentPath;
-    source?: string;
-    cause?: string;
-};
-export declare function isValidComponentPathObject(value: unknown): value is ComponentPathType;

package/dist/webcomponent/src/tracking.d.ts

@@ -1,32 +0,0 @@
-import { Logger } from "./logger";
-declare class Tracking {
-    cccId: string;
-    cccName: string;
-    subtype: string;
-    teamName: string;
-    shadowRoot: ShadowRoot | null;
-    category: string;
-    elements: string | string[];
-    isInitialised: boolean;
-    log: Logger;
-    constructor({ id, name, subtype, teamName, shadowRoot, category, elements, logger, }: {
-        id?: string;
-        name: string;
-        subtype: string;
-        teamName?: string;
-        shadowRoot: ShadowRoot | null;
-        category?: string;
-        elements?: string | string[];
-        logger: Logger;
-    });
-    getEventProperties(event: any): {
-        [k: string]: any;
-    };
-    handleClickEvent(eventData: {
-        action: string;
-        category: string;
-    }, root: Element): (clickEvent: Event, clickElement: HTMLElement) => void;
-    sendSpoorEvent(triggerAction: any, extraDetail: any): void;
-    init(id: string): void;
-}
-export default Tracking;

package/dist/webcomponent/src/util.d.ts

@@ -1,33 +0,0 @@
-/**
- * Used to convert camelCase to kebab-case
- * @param str
- * @returns
- */
-export declare const kebabize: (str: string) => string;
-/**
- * Checks if the provided host is part of the allowed test environments.
- *
- * @param host - The hostname to check.
- * @returns True if the hostname is a safe test environment, false otherwise.
- */
-export declare function isSafeTestEnv(host: string | undefined): boolean;
-/**
- * Checks if the current window location hostname is considered a local environment.
- *
- * @returns True if the hostname is local, false otherwise.
- */
-export declare function isLocalEnv(): boolean;
-/**
- * Checks if the current window location host is one of the Spark environments.
- *
- * @returns True if the host is spark.ft.com or spark-staging.ft.com, false otherwise.
- */
-export declare function isSparkEnv(): boolean;
-/**
- * Checks if the given hostname is in the provided allowlist.
- *
- * @param allowlist - A list of allowed hostnames or RegExp matchers.
- * @param hostname - The hostname to validate.
- * @returns True if the hostname matches any item in the allowlist, false otherwise.
- */
-export declare function isAllowed(allowlist: (string | RegExp)[], hostname: string | undefined): boolean;

package/dist/webcomponent/test/environment.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/webcomponent/test/error-handling.test.d.ts

@@ -1,8 +0,0 @@
-/**
- * @file
- * Unit test for web component error handling
- */
-export declare const worker: import("msw/browser").SetupWorker;
-export declare const it: import("vitest").TestAPI<{
-    worker: import("msw/browser").SetupWorker;
-}>;

package/dist/webcomponent/test/example.d.ts

@@ -1,11 +0,0 @@
-import { ReactRenderer } from "../../ccc-sdk/src/renderers/react/ReactRenderer";
-export declare const renderer: ReactRenderer;
-declare const _default: (shadowRoot: ShadowRoot, attrs: any, ssr?: boolean) => {
-    unmount: (root: any) => void;
-    onmessage: {
-        (...data: any[]): void;
-        (message?: any, ...optionalParams: any[]): void;
-    };
-    ready: Promise<void>;
-};
-export default _default;

package/dist/webcomponent/test/generate-readable-stream.d.ts

@@ -1,8 +0,0 @@
-import { BaseRenderer } from "~sdk/renderers/BaseRenderer";
-export declare const generateReadableStream: ({ framework, props, renderer, }: {
-    framework: string;
-    renderer: BaseRenderer;
-    props: {
-        [key: string]: any;
-    };
-}) => Promise<Response>;

package/dist/webcomponent/test/path.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @file
- * Unit tests for the ComponentPath module
- */
-export {};

package/dist/webcomponent/test/ssr.test.d.ts

@@ -1,4 +0,0 @@
-/**
- * @file
- * Integration testing for server-side rendering
- */

package/dist/webcomponent/test/utils.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/webcomponent/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

package/dist/webcomponent/vitest.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;