SDK Initialization

Basic Usage

import { GeneratorSDK } from '@atomm-developer/generator-sdk'

const sdk = GeneratorSDK.init({
  appKey: 'your_generator_id',  // Required: Unique ID for this generator, defined by the developer
  env: 'prod',             // Optional: Defaults to 'prod'
})

Read Current AppKey

const sdk = GeneratorSDK.init({
  appKey: 'your_app_key',
  env: 'prod',
})

sdk.getAppKey()              // AppKey bound to this instance
GeneratorSDK.getAppKey()     // Most recently initialized appKey

Initialization Parameters

Parameter	Type	Required	Default	Description
appKey	string	Yes	—	Generator ID used to identify the current generator; defined by the developer
env	'prod' | 'pre' | 'test' | 'dev'	No	'prod'	Runtime environment

API BaseURL per Environment

Environment	BaseURL
prod	https://api.xtool.com
pre	https://api-pre.xtool.com
test	https://api-test.xtool.com
dev	https://api-dev.makeblock.com

Key Features

• Global Singleton: Multiple calls to init() with the same appKey + env return the same instance.
• Auto-Restore Login: Automatically reads the cached token from the shared-domain utoken cookie and asynchronously validates it during initialization.
• Cache Key Format: {appKey}::{env}
• appKey Validation: Throws Error('[GeneratorSDK] appKey is required') if appKey is missing.

⚠️ Vue 3 Usage Notes

Why this restriction?

The SDK's internal dependencies use TypeScript private fields (implemented via WeakMap). Vue 3's reactivity system wraps objects in a Proxy, which causes WeakMap reference checks to fail, throwing an error.

Solution 1: Use markRaw (Recommended)

If you must store the SDK instance in a component's reactive data, use markRaw to mark it as non-reactive:

<script setup>
import { markRaw, ref } from 'vue'
import { GeneratorSDK } from '@atomm-developer/generator-sdk'

const sdk = markRaw(GeneratorSDK.init({ appKey: 'xxx' }))  // ✅ Use markRaw
const authStatus = ref(null)

sdk.auth.onChange((status) => {
  authStatus.value = status
})
</script>

Solution 2: Use Module-Level Variables (Best Practice)

Keep the SDK instance at the module level rather than inside a component:

// src/sdk.ts
import { GeneratorSDK } from '@atomm-developer/generator-sdk'

export const sdk = GeneratorSDK.init({ appKey: 'xxx' })  // ✅ Module-level variable

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'
import { sdk } from './sdk'  // ✅ Import module-level variable

const authStatus = ref(null)

sdk.auth.onChange((status) => {
  authStatus.value = status
})
</script>

Solution 3: Usage in Options API

<script>
import { markRaw } from 'vue'
import { GeneratorSDK } from '@atomm-developer/generator-sdk'

export default {
  data() {
    return {
      sdk: markRaw(GeneratorSDK.init({ appKey: 'xxx' })),  // ✅ Use markRaw
      authStatus: null
    }
  },
  mounted() {
    this.sdk.auth.onChange((status) => {
      this.authStatus = status
    })
  }
}
</script>

❌ Incorrect Example

<script setup>
import { ref } from 'vue'
import { GeneratorSDK } from '@atomm-developer/generator-sdk'

const sdk = ref(GeneratorSDK.init({ appKey: 'xxx' }))  // ❌ Will throw an error!
// Vue wraps the SDK in a Proxy, causing internal dependency errors
</script>

Recommended Actions After Initialization

const sdk = GeneratorSDK.init({ appKey: 'app_xxx', env: 'test' })

// 1. Register export provider (if export functionality is needed)
// Two approaches: getExportData (for SVG / non-canvas) or getExportCanvas (canvas)
sdk.export.register({
  getExportCanvas: (purpose) => document.getElementById('myCanvas') as HTMLCanvasElement,
})

// 2. Listen for authentication status changes
sdk.auth.onChange((status) => {
  if (status.isLogin) {
    console.log('User logged in:', status.userInfo?.userName)
  } else {
    console.log('User logged out')
  }
})

// 3. Load Billing info
const usage = await sdk.billing.getUsage()
console.log('Free quota:', usage.freeRemaining, '/', usage.freeTotal)

// 4. Listen for billing changes
sdk.billing.onChange((usage) => updateBillingUI(usage))