@webiny/sdk-frontend 0.0.0-unstable.9f53ea597d → 6.6.0-alpha.2

package/ComponentsSdk.d.ts

@@ -0,0 +1,39 @@
+import type { WebinyConfig } from "@webiny/sdk";
+import { Result, HttpError, ApiError, NetworkError } from "@webiny/sdk";
+export interface RemoteComponentEntry {
+    id: string;
+    name: string;
+    label: string;
+    bundledJs: string;
+    bundledJsSha256: string;
+    bundledCss: string;
+    bundledCssSha256: string;
+    sdkVersion: string;
+    status: string;
+}
+export interface LoadComponentsOptions {
+    fetchOptions?: RequestInit;
+}
+export interface HydrateComponentDependencies {
+    sdk: unknown;
+    React: unknown;
+}
+export interface HydrateComponentOptions {
+    tenantId?: string;
+    locale?: string;
+    mode?: "server" | "browser";
+}
+export interface HydratedComponent {
+    component: any;
+    manifest: any;
+    css: string;
+    scopeClassName: string;
+}
+export declare class ComponentsSdk {
+    private config;
+    private fetchFn;
+    constructor(config: WebinyConfig);
+    loadComponents(options?: LoadComponentsOptions): Promise<Result<RemoteComponentEntry[], HttpError | ApiError | NetworkError>>;
+    hydrateComponent(entry: RemoteComponentEntry, dependencies: HydrateComponentDependencies, options?: HydrateComponentOptions): HydratedComponent | null;
+    scopeCss(rawCss: string, componentName: string): string;
+}

package/ComponentsSdk.js

@@ -0,0 +1,146 @@
+import { ApiError, HttpError, NetworkError, Result } from "@webiny/sdk";
+import * as __rspack_external_css_tree_6b21abdd from "css-tree";
+const LIST_REMOTE_COMPONENTS = `
+    query ListRemoteComponents {
+        remoteComponents {
+            listRemoteComponents {
+                data {
+                    id
+                    name
+                    label
+                    bundledJs
+                    bundledJsSha256
+                    bundledCss
+                    bundledCssSha256
+                    sdkVersion
+                    status
+                }
+                error {
+                    code
+                    message
+                }
+            }
+        }
+    }
+`;
+class ComponentsSdk {
+    constructor(config){
+        this.config = config;
+        this.fetchFn = config.fetch ?? fetch;
+    }
+    async loadComponents(options) {
+        const url = `${this.config.endpoint}/graphql`;
+        const headers = {
+            "Content-Type": "application/json",
+            "x-tenant": this.config.tenant ?? "root",
+            ...this.config.headers
+        };
+        if (this.config.token && !headers.Authorization) {
+            const token = "function" == typeof this.config.token ? await this.config.token() : this.config.token;
+            headers.Authorization = `Bearer ${token}`;
+        }
+        let response;
+        try {
+            response = await this.fetchFn(url, {
+                method: "POST",
+                headers,
+                body: JSON.stringify({
+                    query: LIST_REMOTE_COMPONENTS
+                }),
+                ...options?.fetchOptions
+            });
+        } catch (error) {
+            return Result.fail(new NetworkError(error instanceof Error ? error.message : "Network request failed"));
+        }
+        if (!response.ok) return Result.fail(new HttpError(response.status, `HTTP error! status: ${response.status}`));
+        let json;
+        try {
+            json = await response.json();
+        } catch  {
+            return Result.fail(new NetworkError("Failed to parse response JSON"));
+        }
+        if (json.errors) {
+            const error = json.errors[0];
+            return Result.fail(new ApiError(error?.message || "GraphQL error"));
+        }
+        const envelope = json.data?.remoteComponents?.listRemoteComponents;
+        if (!envelope) return Result.fail(new ApiError("Unexpected response — is the remote-components API extension deployed?"));
+        if (envelope.error) return Result.fail(new ApiError(envelope.error.message, envelope.error.code));
+        return Result.ok(envelope.data ?? []);
+    }
+    hydrateComponent(entry, dependencies, options) {
+        const runtimeSdk = {
+            version: "1",
+            dependencies: {
+                sdk: dependencies.sdk,
+                React: dependencies.React
+            },
+            environment: {
+                tenantId: options?.tenantId ?? this.config.tenant ?? "root",
+                locale: options?.locale ?? "en-US",
+                mode: options?.mode ?? "browser"
+            }
+        };
+        try {
+            const fn = new Function(`
+                var __remoteComponent__;
+                ${entry.bundledJs}
+                return __remoteComponent__;
+            `);
+            const mod = fn();
+            const component = mod.createComponent(runtimeSdk);
+            if (!component) return null;
+            const scopeClass = toScopeClassName(entry.name);
+            const R = dependencies.React;
+            const OriginalComponent = component.component;
+            const ScopedComponent = (props)=>R.createElement("div", {
+                    className: scopeClass
+                }, R.createElement(OriginalComponent, props));
+            ScopedComponent.displayName = `RemoteScope(${scopeClass})`;
+            return {
+                component: ScopedComponent,
+                manifest: component.manifest,
+                css: entry.bundledCss ?? "",
+                scopeClassName: scopeClass
+            };
+        } catch (error) {
+            console.error(`[ComponentsSdk] Failed to hydrate component "${entry.name}":`, error);
+            return null;
+        }
+    }
+    scopeCss(rawCss, componentName) {
+        return scopeCss(rawCss, toScopeClassName(componentName));
+    }
+}
+function toScopeClassName(name) {
+    return `rc-${name.replace(/\//g, "-").toLowerCase()}`;
+}
+function scopeCss(rawCss, scopeName) {
+    if (!rawCss) return "";
+    try {
+        const ast = __rspack_external_css_tree_6b21abdd.parse(rawCss);
+        __rspack_external_css_tree_6b21abdd.walk(ast, {
+            visit: "Rule",
+            enter (node) {
+                const selectorList = node.prelude;
+                if (!selectorList || "SelectorList" !== selectorList.type) return;
+                const newSelectors = new __rspack_external_css_tree_6b21abdd.List();
+                selectorList.children.forEach((selector)=>{
+                    const raw = __rspack_external_css_tree_6b21abdd.generate(selector).trim();
+                    if (raw.startsWith(":root")) return void newSelectors.appendData(selector);
+                    const scoped = __rspack_external_css_tree_6b21abdd.parse(`.${scopeName} ${raw}`, {
+                        context: "selector"
+                    });
+                    newSelectors.appendData(scoped);
+                });
+                selectorList.children = newSelectors;
+            }
+        });
+        return __rspack_external_css_tree_6b21abdd.generate(ast);
+    } catch  {
+        return rawCss;
+    }
+}
+export { ComponentsSdk };
+
+//# sourceMappingURL=ComponentsSdk.js.map

package/ComponentsSdk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentsSdk.js","sources":["../src/ComponentsSdk.ts"],"sourcesContent":["import type { WebinyConfig } from \"@webiny/sdk\";\nimport { Result, HttpError, ApiError, NetworkError } from \"@webiny/sdk\";\n// @ts-expect-error No types available\nimport * as csstree from \"css-tree\";\n\nexport interface RemoteComponentEntry {\n    id: string;\n    name: string;\n    label: string;\n    bundledJs: string;\n    bundledJsSha256: string;\n    bundledCss: string;\n    bundledCssSha256: string;\n    sdkVersion: string;\n    status: string;\n}\n\nexport interface LoadComponentsOptions {\n    fetchOptions?: RequestInit;\n}\n\nexport interface HydrateComponentDependencies {\n    sdk: unknown;\n    React: unknown;\n}\n\nexport interface HydrateComponentOptions {\n    tenantId?: string;\n    locale?: string;\n    mode?: \"server\" | \"browser\";\n}\n\nexport interface HydratedComponent {\n    component: any;\n    manifest: any;\n    css: string;\n    scopeClassName: string;\n}\n\nconst LIST_REMOTE_COMPONENTS = /* GraphQL */ `\n    query ListRemoteComponents {\n        remoteComponents {\n            listRemoteComponents {\n                data {\n                    id\n                    name\n                    label\n                    bundledJs\n                    bundledJsSha256\n                    bundledCss\n                    bundledCssSha256\n                    sdkVersion\n                    status\n                }\n                error {\n                    code\n                    message\n                }\n            }\n        }\n    }\n`;\n\ninterface ListRemoteComponentsResponse {\n    remoteComponents: {\n        listRemoteComponents: {\n            data: RemoteComponentEntry[] | null;\n            error: { code: string; message: string } | null;\n        };\n    };\n}\n\nexport class ComponentsSdk {\n    private config: WebinyConfig;\n    private fetchFn: typeof fetch;\n\n    constructor(config: WebinyConfig) {\n        this.config = config;\n        this.fetchFn = config.fetch ?? fetch;\n    }\n\n    async loadComponents(\n        options?: LoadComponentsOptions\n    ): Promise<Result<RemoteComponentEntry[], HttpError | ApiError | NetworkError>> {\n        const url = `${this.config.endpoint}/graphql`;\n\n        const headers: Record<string, string> = {\n            \"Content-Type\": \"application/json\",\n            \"x-tenant\": this.config.tenant ?? \"root\",\n            ...this.config.headers\n        };\n\n        if (this.config.token && !headers.Authorization) {\n            const token =\n                typeof this.config.token === \"function\"\n                    ? await this.config.token()\n                    : this.config.token;\n            headers.Authorization = `Bearer ${token}`;\n        }\n\n        let response: Response;\n        try {\n            response = await this.fetchFn(url, {\n                method: \"POST\",\n                headers,\n                body: JSON.stringify({ query: LIST_REMOTE_COMPONENTS }),\n                ...options?.fetchOptions\n            });\n        } catch (error) {\n            return Result.fail(\n                new NetworkError(error instanceof Error ? error.message : \"Network request failed\")\n            );\n        }\n\n        if (!response.ok) {\n            return Result.fail(\n                new HttpError(response.status, `HTTP error! status: ${response.status}`)\n            );\n        }\n\n        let json: { data?: ListRemoteComponentsResponse; errors?: Array<{ message: string }> };\n        try {\n            json = await response.json();\n        } catch {\n            return Result.fail(new NetworkError(\"Failed to parse response JSON\"));\n        }\n\n        if (json.errors) {\n            const error = json.errors[0];\n            return Result.fail(new ApiError(error?.message || \"GraphQL error\"));\n        }\n\n        const envelope = json.data?.remoteComponents?.listRemoteComponents;\n        if (!envelope) {\n            return Result.fail(\n                new ApiError(\n                    \"Unexpected response — is the remote-components API extension deployed?\"\n                )\n            );\n        }\n\n        if (envelope.error) {\n            return Result.fail(new ApiError(envelope.error.message, envelope.error.code));\n        }\n\n        return Result.ok(envelope.data ?? []);\n    }\n\n    hydrateComponent(\n        entry: RemoteComponentEntry,\n        dependencies: HydrateComponentDependencies,\n        options?: HydrateComponentOptions\n    ): HydratedComponent | null {\n        const runtimeSdk = {\n            version: \"1\" as const,\n            dependencies: {\n                sdk: dependencies.sdk,\n                React: dependencies.React\n            },\n            environment: {\n                tenantId: options?.tenantId ?? this.config.tenant ?? \"root\",\n                locale: options?.locale ?? \"en-US\",\n                mode: options?.mode ?? \"browser\"\n            }\n        };\n\n        try {\n            const fn = new Function(`\n                var __remoteComponent__;\n                ${entry.bundledJs}\n                return __remoteComponent__;\n            `);\n            const mod = fn();\n            const component = mod.createComponent(runtimeSdk);\n            if (!component) {\n                return null;\n            }\n\n            const scopeClass = toScopeClassName(entry.name);\n            const R = dependencies.React as typeof import(\"react\");\n            const OriginalComponent = component.component;\n\n            const ScopedComponent = (props: Record<string, unknown>) =>\n                R.createElement(\n                    \"div\",\n                    { className: scopeClass },\n                    R.createElement(OriginalComponent, props)\n                );\n            ScopedComponent.displayName = `RemoteScope(${scopeClass})`;\n\n            return {\n                component: ScopedComponent,\n                manifest: component.manifest,\n                css: entry.bundledCss ?? \"\",\n                scopeClassName: scopeClass\n            };\n        } catch (error) {\n            console.error(`[ComponentsSdk] Failed to hydrate component \"${entry.name}\":`, error);\n            return null;\n        }\n    }\n\n    scopeCss(rawCss: string, componentName: string): string {\n        return scopeCss(rawCss, toScopeClassName(componentName));\n    }\n}\n\nfunction toScopeClassName(name: string): string {\n    return `rc-${name.replace(/\\//g, \"-\").toLowerCase()}`;\n}\n\nfunction scopeCss(rawCss: string, scopeName: string): string {\n    if (!rawCss) {\n        return \"\";\n    }\n\n    try {\n        const ast = csstree.parse(rawCss);\n\n        csstree.walk(ast, {\n            visit: \"Rule\",\n            enter(node: any) {\n                const selectorList = node.prelude;\n                if (!selectorList || selectorList.type !== \"SelectorList\") {\n                    return;\n                }\n\n                const newSelectors = new csstree.List();\n\n                selectorList.children.forEach((selector: any) => {\n                    const raw = csstree.generate(selector).trim();\n                    if (raw.startsWith(\":root\")) {\n                        newSelectors.appendData(selector);\n                        return;\n                    }\n\n                    const scoped = csstree.parse(`.${scopeName} ${raw}`, {\n                        context: \"selector\"\n                    });\n                    newSelectors.appendData(scoped);\n                });\n\n                selectorList.children = newSelectors;\n            }\n        });\n\n        return csstree.generate(ast);\n    } catch {\n        return rawCss;\n    }\n}\n"],"names":["LIST_REMOTE_COMPONENTS","ComponentsSdk","config","fetch","options","url","headers","token","response","JSON","error","Result","NetworkError","Error","HttpError","json","ApiError","envelope","entry","dependencies","runtimeSdk","fn","Function","mod","component","scopeClass","toScopeClassName","R","OriginalComponent","ScopedComponent","props","console","rawCss","componentName","scopeCss","name","scopeName","ast","csstree","node","selectorList","newSelectors","selector","raw","scoped"],"mappings":"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"}

package/FrontendSdk.d.ts

@@ -1,6 +1,7 @@
 import type { LanguagesSdk, FileManagerSdk, TenantManagerSdk, TasksSdk, WebhooksSdk } from "@webiny/sdk";
 import { CmsSdk } from "./CmsSdk.js";
 import { WbSdk } from "./WbSdk.js";
+import { ComponentsSdk } from "./ComponentsSdk.js";
 import type { ContentSdkConfig } from "./types.js";
 export declare class FrontendSdk {
     private sdk?;
@@ -12,6 +13,7 @@ export declare class FrontendSdk {
     get tenantManager(): TenantManagerSdk;
     get tasks(): TasksSdk;
     get webhooks(): WebhooksSdk;
+    get components(): ComponentsSdk;
     init(config: ContentSdkConfig): void;
     isEditing(): boolean;
     isServer(): boolean;

package/FrontendSdk.js

@@ -3,6 +3,7 @@ import { contentSdk, environment } from "@webiny/cms-sdk";
 import { contentSdk as website_builder_sdk_contentSdk } from "@webiny/website-builder-sdk";
 import { CmsSdk } from "./CmsSdk.js";
 import { WbSdk } from "./WbSdk.js";
+import { ComponentsSdk } from "./ComponentsSdk.js";
 class FrontendSdk {
     get initialized() {
         if (!this.sdk) throw new Error("SDK is not initialized. Call sdk.init() first.");
@@ -29,6 +30,9 @@ class FrontendSdk {
     get webhooks() {
         return this.initialized.webiny.webhooks;
     }
+    get components() {
+        return this.initialized.components;
+    }
     init(config) {
         const webiny = new Webiny({
             endpoint: config.endpoint,
@@ -39,7 +43,13 @@ class FrontendSdk {
         this.sdk = {
             webiny,
             cms: new CmsSdk(webiny),
-            wb: new WbSdk()
+            wb: new WbSdk(),
+            components: new ComponentsSdk({
+                endpoint: config.endpoint,
+                token: config.token,
+                tenant: config.tenant || "root",
+                fetch: config.fetch
+            })
         };
         contentSdk.init({
             apiHost: config.endpoint,

package/FrontendSdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrontendSdk.js","sources":["../src/FrontendSdk.ts"],"sourcesContent":["import { Webiny } from \"@webiny/sdk\";\nimport type {\n    LanguagesSdk,\n    FileManagerSdk,\n    TenantManagerSdk,\n    TasksSdk,\n    WebhooksSdk\n} from \"@webiny/sdk\";\nimport { contentSdk as cmsContentSdk, environment as cmsEnvironment } from \"@webiny/cms-sdk\";\nimport { contentSdk as wbContentSdk } from \"@webiny/website-builder-sdk\";\nimport { CmsSdk } from \"./CmsSdk.js\";\nimport { WbSdk } from \"./WbSdk.js\";\nimport type { ContentSdkConfig } from \"./types.js\";\n\ninterface InitializedSdk {\n    webiny: Webiny;\n    cms: CmsSdk;\n    wb: WbSdk;\n}\n\nexport class FrontendSdk {\n    private sdk?: InitializedSdk;\n\n    private get initialized(): InitializedSdk {\n        if (!this.sdk) {\n            throw new Error(\"SDK is not initialized. Call sdk.init() first.\");\n        }\n        return this.sdk;\n    }\n\n    get cms(): CmsSdk {\n        return this.initialized.cms;\n    }\n\n    get wb(): WbSdk {\n        return this.initialized.wb;\n    }\n\n    get languages(): LanguagesSdk {\n        return this.initialized.webiny.languages;\n    }\n\n    get fileManager(): FileManagerSdk {\n        return this.initialized.webiny.fileManager;\n    }\n\n    get tenantManager(): TenantManagerSdk {\n        return this.initialized.webiny.tenantManager;\n    }\n\n    get tasks(): TasksSdk {\n        return this.initialized.webiny.tasks;\n    }\n\n    get webhooks(): WebhooksSdk {\n        return this.initialized.webiny.webhooks;\n    }\n\n    init(config: ContentSdkConfig): void {\n        const webiny = new Webiny({\n            endpoint: config.endpoint,\n            token: config.token,\n            tenant: config.tenant || \"root\",\n            fetch: config.fetch\n        });\n\n        this.sdk = {\n            webiny,\n            cms: new CmsSdk(webiny),\n            wb: new WbSdk()\n        };\n\n        cmsContentSdk.init(\n            {\n                apiHost: config.endpoint,\n                apiKey: config.token,\n                apiTenant: config.tenant,\n                preview: config.preview,\n                fetch: config.fetch\n            },\n            webiny\n        );\n\n        wbContentSdk.init({\n            apiHost: config.endpoint,\n            apiKey: config.token,\n            apiTenant: config.tenant ?? \"root\",\n            preview: config.preview,\n            theme: config.wb?.theme,\n            previewParams: config.wb?.previewParams\n        });\n\n        if (config.wb?.componentGroups) {\n            for (const group of config.wb.componentGroups) {\n                this.sdk.wb.registerComponentGroup(group);\n            }\n        }\n    }\n\n    isEditing(): boolean {\n        return cmsEnvironment.isEditing();\n    }\n\n    isServer(): boolean {\n        return cmsEnvironment.isServer();\n    }\n\n    isClient(): boolean {\n        return cmsEnvironment.isClient();\n    }\n}\n\nexport const sdk = new FrontendSdk();\n"],"names":["FrontendSdk","Error","config","webiny","Webiny","CmsSdk","WbSdk","cmsContentSdk","wbContentSdk","group","cmsEnvironment","sdk"],"mappings":";;;;;AAoBO,MAAMA;IAGT,IAAY,cAA8B;QACtC,IAAI,CAAC,IAAI,CAAC,GAAG,EACT,MAAM,IAAIC,MAAM;QAEpB,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,MAAc;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG;IAC/B;IAEA,IAAI,KAAY;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC,EAAE;IAC9B;IAEA,IAAI,YAA0B;QAC1B,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS;IAC5C;IAEA,IAAI,cAA8B;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW;IAC9C;IAEA,IAAI,gBAAkC;QAClC,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,aAAa;IAChD;IAEA,IAAI,QAAkB;QAClB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK;IACxC;IAEA,IAAI,WAAwB;QACxB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ;IAC3C;IAEA,KAAKC,MAAwB,EAAQ;QACjC,MAAMC,SAAS,IAAIC,OAAO;YACtB,UAAUF,OAAO,QAAQ;YACzB,OAAOA,OAAO,KAAK;YACnB,QAAQA,OAAO,MAAM,IAAI;YACzB,OAAOA,OAAO,KAAK;QACvB;QAEA,IAAI,CAAC,GAAG,GAAG;YACPC;YACA,KAAK,IAAIE,OAAOF;YAChB,IAAI,IAAIG;QACZ;QAEAC,WAAAA,IAAkB,CACd;YACI,SAASL,OAAO,QAAQ;YACxB,QAAQA,OAAO,KAAK;YACpB,WAAWA,OAAO,MAAM;YACxB,SAASA,OAAO,OAAO;YACvB,OAAOA,OAAO,KAAK;QACvB,GACAC;QAGJK,+BAAAA,IAAiB,CAAC;YACd,SAASN,OAAO,QAAQ;YACxB,QAAQA,OAAO,KAAK;YACpB,WAAWA,OAAO,MAAM,IAAI;YAC5B,SAASA,OAAO,OAAO;YACvB,OAAOA,OAAO,EAAE,EAAE;YAClB,eAAeA,OAAO,EAAE,EAAE;QAC9B;QAEA,IAAIA,OAAO,EAAE,EAAE,iBACX,KAAK,MAAMO,SAASP,OAAO,EAAE,CAAC,eAAe,CACzC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,sBAAsB,CAACO;IAG/C;IAEA,YAAqB;QACjB,OAAOC,YAAAA,SAAwB;IACnC;IAEA,WAAoB;QAChB,OAAOA,YAAAA,QAAuB;IAClC;IAEA,WAAoB;QAChB,OAAOA,YAAAA,QAAuB;IAClC;AACJ;AAEO,MAAMC,MAAM,IAAIX"}
+{"version":3,"file":"FrontendSdk.js","sources":["../src/FrontendSdk.ts"],"sourcesContent":["import { Webiny } from \"@webiny/sdk\";\nimport type {\n    LanguagesSdk,\n    FileManagerSdk,\n    TenantManagerSdk,\n    TasksSdk,\n    WebhooksSdk\n} from \"@webiny/sdk\";\nimport { contentSdk as cmsContentSdk, environment as cmsEnvironment } from \"@webiny/cms-sdk\";\nimport { contentSdk as wbContentSdk } from \"@webiny/website-builder-sdk\";\nimport { CmsSdk } from \"./CmsSdk.js\";\nimport { WbSdk } from \"./WbSdk.js\";\nimport { ComponentsSdk } from \"./ComponentsSdk.js\";\nimport type { ContentSdkConfig } from \"./types.js\";\n\ninterface InitializedSdk {\n    webiny: Webiny;\n    cms: CmsSdk;\n    wb: WbSdk;\n    components: ComponentsSdk;\n}\n\nexport class FrontendSdk {\n    private sdk?: InitializedSdk;\n\n    private get initialized(): InitializedSdk {\n        if (!this.sdk) {\n            throw new Error(\"SDK is not initialized. Call sdk.init() first.\");\n        }\n        return this.sdk;\n    }\n\n    get cms(): CmsSdk {\n        return this.initialized.cms;\n    }\n\n    get wb(): WbSdk {\n        return this.initialized.wb;\n    }\n\n    get languages(): LanguagesSdk {\n        return this.initialized.webiny.languages;\n    }\n\n    get fileManager(): FileManagerSdk {\n        return this.initialized.webiny.fileManager;\n    }\n\n    get tenantManager(): TenantManagerSdk {\n        return this.initialized.webiny.tenantManager;\n    }\n\n    get tasks(): TasksSdk {\n        return this.initialized.webiny.tasks;\n    }\n\n    get webhooks(): WebhooksSdk {\n        return this.initialized.webiny.webhooks;\n    }\n\n    get components(): ComponentsSdk {\n        return this.initialized.components;\n    }\n\n    init(config: ContentSdkConfig): void {\n        const webiny = new Webiny({\n            endpoint: config.endpoint,\n            token: config.token,\n            tenant: config.tenant || \"root\",\n            fetch: config.fetch\n        });\n\n        this.sdk = {\n            webiny,\n            cms: new CmsSdk(webiny),\n            wb: new WbSdk(),\n            components: new ComponentsSdk({\n                endpoint: config.endpoint,\n                token: config.token,\n                tenant: config.tenant || \"root\",\n                fetch: config.fetch\n            })\n        };\n\n        cmsContentSdk.init(\n            {\n                apiHost: config.endpoint,\n                apiKey: config.token,\n                apiTenant: config.tenant,\n                preview: config.preview,\n                fetch: config.fetch\n            },\n            webiny\n        );\n\n        wbContentSdk.init({\n            apiHost: config.endpoint,\n            apiKey: config.token,\n            apiTenant: config.tenant ?? \"root\",\n            preview: config.preview,\n            theme: config.wb?.theme,\n            previewParams: config.wb?.previewParams\n        });\n\n        if (config.wb?.componentGroups) {\n            for (const group of config.wb.componentGroups) {\n                this.sdk.wb.registerComponentGroup(group);\n            }\n        }\n    }\n\n    isEditing(): boolean {\n        return cmsEnvironment.isEditing();\n    }\n\n    isServer(): boolean {\n        return cmsEnvironment.isServer();\n    }\n\n    isClient(): boolean {\n        return cmsEnvironment.isClient();\n    }\n}\n\nexport const sdk = new FrontendSdk();\n"],"names":["FrontendSdk","Error","config","webiny","Webiny","CmsSdk","WbSdk","ComponentsSdk","cmsContentSdk","wbContentSdk","group","cmsEnvironment","sdk"],"mappings":";;;;;;AAsBO,MAAMA;IAGT,IAAY,cAA8B;QACtC,IAAI,CAAC,IAAI,CAAC,GAAG,EACT,MAAM,IAAIC,MAAM;QAEpB,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,MAAc;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG;IAC/B;IAEA,IAAI,KAAY;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC,EAAE;IAC9B;IAEA,IAAI,YAA0B;QAC1B,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS;IAC5C;IAEA,IAAI,cAA8B;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW;IAC9C;IAEA,IAAI,gBAAkC;QAClC,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,aAAa;IAChD;IAEA,IAAI,QAAkB;QAClB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK;IACxC;IAEA,IAAI,WAAwB;QACxB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ;IAC3C;IAEA,IAAI,aAA4B;QAC5B,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU;IACtC;IAEA,KAAKC,MAAwB,EAAQ;QACjC,MAAMC,SAAS,IAAIC,OAAO;YACtB,UAAUF,OAAO,QAAQ;YACzB,OAAOA,OAAO,KAAK;YACnB,QAAQA,OAAO,MAAM,IAAI;YACzB,OAAOA,OAAO,KAAK;QACvB;QAEA,IAAI,CAAC,GAAG,GAAG;YACPC;YACA,KAAK,IAAIE,OAAOF;YAChB,IAAI,IAAIG;YACR,YAAY,IAAIC,cAAc;gBAC1B,UAAUL,OAAO,QAAQ;gBACzB,OAAOA,OAAO,KAAK;gBACnB,QAAQA,OAAO,MAAM,IAAI;gBACzB,OAAOA,OAAO,KAAK;YACvB;QACJ;QAEAM,WAAAA,IAAkB,CACd;YACI,SAASN,OAAO,QAAQ;YACxB,QAAQA,OAAO,KAAK;YACpB,WAAWA,OAAO,MAAM;YACxB,SAASA,OAAO,OAAO;YACvB,OAAOA,OAAO,KAAK;QACvB,GACAC;QAGJM,+BAAAA,IAAiB,CAAC;YACd,SAASP,OAAO,QAAQ;YACxB,QAAQA,OAAO,KAAK;YACpB,WAAWA,OAAO,MAAM,IAAI;YAC5B,SAASA,OAAO,OAAO;YACvB,OAAOA,OAAO,EAAE,EAAE;YAClB,eAAeA,OAAO,EAAE,EAAE;QAC9B;QAEA,IAAIA,OAAO,EAAE,EAAE,iBACX,KAAK,MAAMQ,SAASR,OAAO,EAAE,CAAC,eAAe,CACzC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,sBAAsB,CAACQ;IAG/C;IAEA,YAAqB;QACjB,OAAOC,YAAAA,SAAwB;IACnC;IAEA,WAAoB;QAChB,OAAOA,YAAAA,QAAuB;IAClC;IAEA,WAAoB;QAChB,OAAOA,YAAAA,QAAuB;IAClC;AACJ;AAEO,MAAMC,MAAM,IAAIZ"}

package/index.d.ts

@@ -1,9 +1,11 @@
 export { sdk, FrontendSdk } from "./FrontendSdk.js";
+export { ComponentsSdk } from "./ComponentsSdk.js";
+export type { RemoteComponentEntry, LoadComponentsOptions, HydrateComponentDependencies, HydrateComponentOptions, HydratedComponent } from "./ComponentsSdk.js";
 export type { ContentSdkConfig, WbConfig, CmsConfig } from "./types.js";
 export { Result, HttpError, ApiError, NetworkError, ValidationError } from "@webiny/sdk";
 export type { Language } from "@webiny/sdk";
 export type { CmsEntryData, CreateEntryParams, CreateCmsEntryData, UpdateEntryRevisionParams, UpdateCmsEntryData, DeleteEntryRevisionParams, PublishEntryRevisionParams, UnpublishEntryRevisionParams } from "@webiny/sdk";
-export { createComponent, resolveRefs } from "@webiny/cms-sdk";
+export { createComponent as createCmsComponent, resolveRefs } from "@webiny/cms-sdk";
 export type { CmsSdkConfig, CmsEntryValues, CmsEntry, CmsListMeta, CmsListResult, GetEntryParams, ListEntriesParams, CmsModelDefinition, CmsModelMetadata, CmsRefModelMetadata, Asset, AssetImage, AssetCrop, AssetFocalPoint, AssetDocument, AssetVideo } from "@webiny/cms-sdk";
 export type { PublicPage, PublicRedirect, ListPagesOptions, ListPagesResult, ComponentGroup, WebsiteBuilderThemeInput, ComponentManifest, ComponentInput } from "@webiny/website-builder-sdk";
-export { createTheme } from "@webiny/website-builder-sdk";
+export { createTheme, createComponent as createWbComponent } from "@webiny/website-builder-sdk";

package/index.js

@@ -1,4 +1,5 @@
 export { FrontendSdk, sdk } from "./FrontendSdk.js";
+export { ComponentsSdk } from "./ComponentsSdk.js";
 export { ApiError, HttpError, NetworkError, Result, ValidationError } from "@webiny/sdk";
-export { createComponent, resolveRefs } from "@webiny/cms-sdk";
-export { createTheme } from "@webiny/website-builder-sdk";
+export { createComponent as createCmsComponent, resolveRefs } from "@webiny/cms-sdk";
+export { createComponent as createWbComponent, createTheme } from "@webiny/website-builder-sdk";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/sdk-frontend",
-	"version": "0.0.0-unstable.9f53ea597d",
+	"version": "6.6.0-alpha.2",
 	"type": "module",
 	"repository": {
 		"type": "git",
@@ -16,14 +16,15 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@webiny/cms-sdk": "0.0.0-unstable.9f53ea597d",
-		"@webiny/sdk": "0.0.0-unstable.9f53ea597d",
-		"@webiny/website-builder-sdk": "0.0.0-unstable.9f53ea597d"
+		"@webiny/cms-sdk": "6.6.0-alpha.2",
+		"@webiny/sdk": "6.6.0-alpha.2",
+		"@webiny/website-builder-sdk": "6.6.0-alpha.2",
+		"css-tree": "3.2.1"
 	},
 	"devDependencies": {
-		"@webiny/build-tools": "0.0.0-unstable.9f53ea597d",
+		"@webiny/build-tools": "6.6.0-alpha.2",
 		"typescript": "7.0.2",
-		"vitest": "4.1.10"
+		"vitest": "4.1.11"
 	},
 	"webiny": {
 		"publishFrom": "dist"