Application Instance API

createPtah()

This method is used to create a new application instance. Through this instance, you can access various features and configurations of the application.

• Description
  id is a required parameter that uniquely identifies each application instance, ensuring isolation between different instances. Other settings of the application can be configured as needed.
  licenseKey is a required parameter, the authorization code.

• Parameters

  • id (String): The unique identifier for the application instance, cannot be empty.
  • licenseKey (String): The authorization code for the application instance, cannot be empty.

• Example

  import { createPtah } from '@ptahjs/creative-vue';
  
  const app = createPtah({
      id: 'app-1', // Set the unique ID for the application instance
      licenseKey: '******'
  });

app.id

This property is used to get the unique identifier of the current application instance. It allows you to easily access and validate the current application instance.

• Description
  app.id returns the id value of the application instance, helping developers distinguish between instances in a multi-instance environment.

• Example

  console.log(app.id); // Output: 'ptah-app-1'

app.modeType

This property returns the mode type used by the current application. It can be used to differentiate between application running modes, helping with configuration and rendering in different scenarios.

• Description
  modeType returns the current application's mode, such as WEB, MOBILE, CANVAS, etc. You can switch between different modes as needed.

• Example

  console.log(app.modeType); // Output: 'WEB'

  See Mode Types for more information.

app.$load()

This method is used to load various resources required by the application. In editing mode, you need to load block data, scene parameters, and events, among other things.

• Description
  app.$load() allows you to load different types of resources dynamically, enabling flexible expansion of the application's functionality at runtime.

• Parameters

  • resourceType (String): The type of resource (e.g., BLOCKS, SCENE_PROPS, SCENE_EVENTS).
  • data (Array): The resource data to be loaded.

• Example

  import { RESOURCE_TYPE } from '@ptahjs/creative-vue';
  
  // Load modules, scene parameters, and events
  app.$load(RESOURCE_TYPE.BLOCKS, []);
  app.$load(RESOURCE_TYPE.SCENE_PROPS, []);
  app.$load(RESOURCE_TYPE.SCENE_EVENTS, []);

  See Resource Types for more information.

app.$proxyData()

This method is used to proxy data within the application, turning it into reactive data. It is suitable for Vue 3 projects, where you can easily achieve reactive data management through data proxying.

• Description
  app.$proxyData() accepts a function that returns the proxied data, ensuring that data is updated in real-time in the view.

• Example

  app.$proxyData((data) => reactive(data));

app.$lifecycle()

Lifecycle management method, typically used in plugin development. Through this method, plugins can modify data during specific lifecycle stages of the application, helping to implement more refined control.

• Description
  app.$lifecycle() can register hook functions to modify data at different stages of the application's lifecycle. For example, you can intervene before data transformation or perform other actions after data is loaded.

• Parameters

  • lifecycleType (String): The lifecycle type, such as BEFORE_TRANSFORM_DATA.
  • callback (Function): A hook function for executing custom operations.

• Example

  import { LIFECYCLE_TYPE } from '@ptahjs/creative-vue';
  
  export default {
      name: 'TestPlugin',
      install(engine) {
          engine.$lifecycle.notify(LIFECYCLE_TYPE.BEFORE_TRANSFORM_DATA, (data) => {
              console.log('BEFORE_TRANSFORM_DATA', data);
              return data; // Modify and return the data
          });
      }
  };

  See Lifecycle Types for more information.

app.$blocks()

This method is used to load and dynamically add block data. Blocks are the core modules for building applications, and this method allows you to adjust the module content dynamically.

• Description
  app.$blocks() can load multiple block configurations and add them to the application. It supports dynamic updates to the block data, making it suitable for use in editing mode.

• Example

  app.$blocks.load([
      {
          title: 'Remote Component',
          icon: 'icon-detail',
          items: [
              {
                  title: 'A',
                  icon: 'icon-detail',
                  items: [data.data]
              }
          ]
      }
  ]);

  See Block Data for more information.

app.$vueInstance()

This method is used to bind a Vue instance to the application. Through this method, you can automatically register Vue components and perform other Vue-related operations within the application.

• Description
  app.$vueInstance() allows you to directly register Vue components in the application, simplifying Vue instance management.

• Example

  import { createApp } from 'vue';
  import App from './App.vue';
  
  const app = createApp(App);
  ptahInstance.$vueInstance(app);

app.$mode()

This method is used to set the application’s scene mode. By choosing different scene modes, you can control how the application appears, adapting to different platforms or requirements.

• Description
  app.$mode() accepts a scene mode as a parameter, allowing you to select different extended scene modes such as Web, Mobile, or 3D.

• Example

  import ModeWeb from '@ptahjs/mode-web';
  
  ptahInstance.$mode(ModeWeb);

app.use()

This method is used to install plugins or other functional modules into the application.

• Description
  app.use() allows you to dynamically install plugins or libraries into the application, extending its functionality.

app.schema()

This method is used to load schema data, display it, and render it as a page.

• Description
  app.schema() allows you to dynamically load schema data into the application.

app.mount()

This method is used to mount and start the application. Through the mount() method, you can officially start the application, render it, and handle events.

• Note
  Methods with a $ prefix are built-in plugin extensions that support method chaining to simplify the configuration process.

app.unmount()

This method is used to unmount the application instance and stop all operations.

Chaining Support

You can complete multiple configuration and initialization steps in a single call through method chaining, improving the simplicity and readability of the code.

const ptahInstance = createPtah({
    id: 'app-1',
    licenseKey: '******'
})
    .$vue(vueInstance)
    .$mode(ModeWeb)
    .$load(RESOURCE_TYPE.BLOCKS, [])
    .mount();