@cesdk/engine 1.68.0-nightly.20260122 → 1.68.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cesdk/engine",
-  "version": "1.68.0-nightly.20260122",
+  "version": "1.68.0-rc.0",
   "main": "./index.js",
   "exports": {
     ".": {

package/react/index.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+
+import type { Configuration } from '@cesdk/cesdk-js';
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+/**
+ * A production-ready React wrapper for the Creative Editor SDK.
+ *
+ * Provides a React component with proper error handling, loading state callbacks,
+ * and lifecycle management for integrating the Creative Editor SDK. The component
+ * handles SDK initialization and cleanup.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * import CreativeEditor from '@cesdk/cesdk-js/react';
+ *
+ * function MyApp() {
+ *   return (
+ *     <CreativeEditor
+ *       config={{
+ *         licenseKey: 'your-license-key',
+ *         baseURL: 'https://your-cdn-url/assets',
+ *       }}
+ *       init={async (cesdk) => {
+ *         await cesdk.addDefaultAssetSources();
+ *         await cesdk.addDemoAssetSources();
+ *         await cesdk.createDesignScene();
+ *       }}
+ *       width="100vw"
+ *       height="100vh"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example With Error Handling
+ * ```tsx
+ * import CreativeEditor from '@cesdk/cesdk-js/react';
+ *
+ * function MyApp() {
+ *   return (
+ *     <CreativeEditor
+ *       config={{
+ *         licenseKey: 'your-license-key',
+ *         baseURL: 'https://your-cdn-url/assets',
+ *       }}
+ *       init={async (cesdk) => {
+ *         await cesdk.addDefaultAssetSources();
+ *         await cesdk.addDemoAssetSources();
+ *         await cesdk.createDesignScene();
+ *       }}
+ *       onError={(error) => {
+ *         console.error('SDK initialization failed:', error);
+ *         // Handle error (e.g., show notification, retry logic)
+ *       }}
+ *       onLoadingStateChange={(state) => {
+ *         console.log('Loading state changed:', state);
+ *       }}
+ *       width="100vw"
+ *       height="100vh"
+ *     />
+ *   );
+ * }
+ * ```
+ * @remarks
+ * - The component automatically handles SDK cleanup on unmount
+ * - For render-time errors, we recommend using a React Error Boundary
+ * @category Framework Wrapper
+ * @public
+ */
+declare const CreativeEditor: ForwardRefExoticComponent<CreativeEditorProps & RefAttributes<HTMLDivElement>>;
+export { CreativeEditor }
+export default CreativeEditor;
+
+/**
+ * Error that occurred during Creative Editor SDK initialization.
+ * @public
+ */
+export declare interface CreativeEditorError {
+    /** The error message */
+    message: string;
+    /** The original error object */
+    cause?: unknown;
+}
+
+/**
+ * Loading state of the Creative Editor SDK.
+ * @public
+ */
+export declare type CreativeEditorLoadingState = 'idle' | 'loading' | 'loaded' | 'error';
+
+/**
+ * Props for the CreativeEditor React component.
+ * @public
+ */
+export declare interface CreativeEditorProps {
+    /** Configuration object for the Creative Editor SDK */
+    config: Configuration;
+    /** Initialization function called after SDK instance is created */
+    init?: (cesdk: CreativeEditorSDK) => void | Promise<void>;
+    /** Height of the editor container */
+    height?: number | string;
+    /** Width of the editor container */
+    width?: number | string;
+    /** CSS class name for the container element */
+    className?: string;
+    /** Callback fired when loading state changes */
+    onLoadingStateChange?: (state: CreativeEditorLoadingState) => void;
+    /** Callback fired when an error occurs */
+    onError?: (error: CreativeEditorError) => void;
+}
+
+export { }

package/react/index.js

@@ -0,0 +1 @@
+import{createElement as t,forwardRef as r,useCallback as e,useEffect as n,useMemo as i,useRef as a}from"react";function o(...t){return r=>{for(const e of t)"function"==typeof e?e(r):null!=e&&(e.current=r)}}function c(t){const r=a(t);return n((()=>{r.current=t})),i((()=>(...t)=>r.current?.(...t)),[])}var u=r((function({config:r,init:u,height:d="100%",width:l="100%",className:s,onLoadingStateChange:f,onError:h},p){const v=a(null),y=a(null),g=a("idle"),m=c(h),w=c(f),E=a(r).current,C=i((()=>({height:d,width:l})),[d,l]),b=e((t=>{g.current=t,w?.(t)}),[w]),j=e(((t,r)=>{const e={message:t,cause:r};b("error"),m?.(e)}),[m,b]),N=e((()=>{if(y.current)try{y.current.dispose()}catch(t){j("Error during CreativeEditor cleanup",t)}finally{y.current=null,b("idle")}}),[j,b]),k=e((t=>{if(!t||"object"!=typeof t)throw new Error("Configuration must be a valid object")}),[]),I=e((t=>{if(!t||"function"!=typeof t)throw new Error("Init must be a valid function")}),[]);return n((()=>{let t=!0;return(async()=>{const r=v.current;if(r&&"idle"===g.current&&!y.current)try{b("loading"),k(E),I(u);const CreativeEditorSDK=(await import("@cesdk/cesdk-js")).default,e=await CreativeEditorSDK.create(r,E);if(!t)return void e.dispose();y.current=e,b("loaded");try{await(u?.(e))}catch(t){j("Initialization function failed",t)}}catch(r){if(!t)return;j("Failed to create Creative Editor SDK instance",r)}})(),()=>{t=!1,b("idle"),N()}}),[u,k,I,b,j,N,E]),t("div",{ref:o(v,p),style:C,className:s,"data-testid":"creative-editor-container"})}));u.displayName="CreativeEditor";var d=u;export{u as CreativeEditor,d as default};

package/vue/index.d.ts

@@ -0,0 +1,162 @@
+import type { Configuration } from '@cesdk/cesdk-js';
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { DefineComponent } from 'vue';
+import { PropType } from 'vue';
+
+/**
+ * A production-ready Vue 3 wrapper for the Creative Editor SDK.
+ *
+ * Provides a Vue component with proper error handling, loading state events,
+ * and lifecycle management for integrating the Creative Editor SDK. The component
+ * handles SDK initialization and cleanup using Vue's Composition API.
+ *
+ * @example Basic Usage
+ * ```vue
+ * <template>
+ *   <CreativeEditor
+ *     :config="{
+ *       licenseKey: 'your-license-key',
+ *       baseURL: 'https://your-cdn-url/assets',
+ *     }"
+ *     :init="initEditor"
+ *     width="100vw"
+ *     height="100vh"
+ *   />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import CreativeEditor from '@cesdk/cesdk-js/vue';
+ *
+ * const initEditor = async (cesdk) => {
+ *   await cesdk.addDefaultAssetSources();
+ *   await cesdk.addDemoAssetSources();
+ *   await cesdk.createDesignScene();
+ * };
+ * </script>
+ * ```
+ *
+ * @example With Error Handling
+ * ```vue
+ * <template>
+ *   <CreativeEditor
+ *     :config="{
+ *       licenseKey: 'your-license-key',
+ *       baseURL: 'https://your-cdn-url/assets',
+ *     }"
+ *     :init="initEditor"
+ *     @loading-state-change="onLoadingStateChange"
+ *     @error="onError"
+ *     width="100vw"
+ *     height="100vh"
+ *   />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import CreativeEditor, {
+ *   type CreativeEditorError,
+ *   type CreativeEditorLoadingState
+ * } from '@cesdk/cesdk-js/vue';
+ *
+ * const initEditor = async (cesdk) => {
+ *   await cesdk.addDefaultAssetSources();
+ *   await cesdk.addDemoAssetSources();
+ *   await cesdk.createDesignScene();
+ * };
+ *
+ * const onError = (error: CreativeEditorError) => {
+ *   console.error('SDK initialization failed:', error);
+ *   // Handle error (e.g., show notification, retry logic)
+ * };
+ *
+ * const onLoadingStateChange = (state: CreativeEditorLoadingState) => {
+ *   console.log('Loading state changed:', state);
+ * };
+ * </script>
+ * ```
+ *
+ * @remarks
+ * - The component automatically handles SDK cleanup on unmount
+ * - Uses Vue 3 Composition API for optimal performance and TypeScript support
+ * - For render-time errors, we recommend using Vue's error handling mechanisms
+ * @category Framework Wrapper
+ * @public
+ */
+declare const CreativeEditor: CreativeEditorComponent;
+export { CreativeEditor }
+export default CreativeEditor;
+
+/**
+ * Component type for the CreativeEditor Vue component.
+ * @public
+ * */
+export declare type CreativeEditorComponent = DefineComponent<{
+    config: {
+        type: PropType<Configuration>;
+        required: true;
+    };
+    init: {
+        type: PropType<(cesdk: CreativeEditorSDK) => void | Promise<void>>;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {}, {}, {}, {}, {}, {}, {
+    'loading-state-change': (state: CreativeEditorLoadingState) => void;
+    error: (error: CreativeEditorError) => void;
+}>;
+
+/**
+ * Emits for the CreativeEditor Vue component.
+ * @public
+ */
+export declare type CreativeEditorEmits = {
+    /** Emitted when loading state changes */
+    'loading-state-change': (state: CreativeEditorLoadingState) => void;
+    /** Emitted when an error occurs */
+    error: (error: CreativeEditorError) => void;
+};
+
+/**
+ * Error that occurred during Creative Editor SDK initialization.
+ * @public
+ */
+export declare interface CreativeEditorError {
+    /** The error message */
+    message: string;
+    /** The original error object */
+    cause?: unknown;
+}
+
+/**
+ * Loading state of the Creative Editor SDK.
+ * @public
+ */
+export declare type CreativeEditorLoadingState = 'idle' | 'loading' | 'loaded' | 'error';
+
+/**
+ * Props for the CreativeEditor Vue component.
+ * @public
+ */
+export declare interface CreativeEditorProps {
+    /** Configuration object for the Creative Editor SDK */
+    config: Configuration;
+    /** Initialization function called after SDK instance is created */
+    init: (cesdk: CreativeEditorSDK) => void | Promise<void>;
+    /** Height of the editor container */
+    height?: number | string;
+    /** Width of the editor container */
+    width?: number | string;
+    /** CSS class name for the container element */
+    class?: string;
+}
+
+export { }

package/vue/index.js

@@ -0,0 +1 @@
+import{defineComponent as e,h as t,onBeforeUnmount as i,onMounted as a,ref as r,shallowRef as n,watch as o}from"vue";var l=e({name:"CreativeEditor",props:{config:{type:Object,required:!0},init:{type:Function,required:!0},height:{type:[Number,String],default:"100%"},width:{type:[Number,String],default:"100%"},class:{type:String,default:void 0}},emits:{"loading-state-change":e=>["idle","loading","loaded","error"].includes(e),error:e=>e&&"object"==typeof e&&"string"==typeof e.message},setup(e,{emit:l,expose:d,attrs:c}){const s=r(null),u=n(null),g=r("idle");let f=0,p=!1;const v=(e,t)=>{const i={message:e,cause:t};g.value="error",l("loading-state-change","error"),l("error",i)},h=()=>{if(u.value)try{u.value.dispose()}catch(e){p&&v("Error during CreativeEditor cleanup",e)}finally{u.value=null}},y=async()=>{const t=++f,i=s.value;if(i)try{g.value="loading",l("loading-state-change","loading"),(e=>{if(!e||"object"!=typeof e)throw new Error("Configuration must be a valid object")})(e.config),(e=>{if(!e||"function"!=typeof e)throw new Error("Init must be a valid function")})(e.init);const CreativeEditorSDK=(await import("@cesdk/cesdk-js")).default,a=await CreativeEditorSDK.create(i,e.config);if(t!==f||!p){try{a.dispose()}catch{}return}u.value=a,g.value="loaded",l("loading-state-change","loaded");try{await(e.init?.(a))}catch(e){v("Initialization function failed",e)}}catch(e){p&&t===f&&v("Failed to create Creative Editor SDK instance",e)}};return o((()=>e.config),(()=>{s.value&&p&&(h(),y())}),{deep:!0}),o((()=>e.init),(()=>{s.value&&p&&(h(),y())})),a((()=>{p=!0,y()})),i((()=>{p=!1,f++,h()})),d({cesdk:u,loadingState:g,reinitialize:y,dispose:h}),()=>{const i={height:e.height,width:e.width};return t("div",{ref:s,class:e.class,style:i,"data-testid":"creative-editor-container",...c})}}}),d=l;export{l as CreativeEditor,d as default};