@sourcesync-sdk/render-experience-web

Overview

The @sourcesync-sdk/render-experience-web package is a tool for rendering experiences on the web.

Installation

To install the package, run the following command in your project directory:

npm install sourcesync-sdk

Or install a submodule as its own dependency:

npm install @sourcesync-sdk/render-experience-web @sourcesync-sdk/app

How to use

Getting started

First, initialize your application and create an experience:

import { initializeApp } from 'sourcesync-sdk/app';
import { createExperience, modeCfg, type GridTargetConfig } from 'sourcesync-sdk/render-experience-web';

const app = await initializeApp({
  appKey: 'your-app-key',
  
  // app config
})

const { experience } = await createExperience(app, {
  targetEl: '#target',
  distribution: {
    id: 'your-distribution-id',

    // support coming soon
    // clientId: 'your-client-id',
  }
});

Next, define modes for your experience. By default, modes will be evaluated in order of definition, and the first mode that meets its conditions will be activated.

experience.mode.addBreakpoint(
  // mode name
  'mobile', 
  // conditions to be verified to activate the mode
  { mediaQuery: '(max-width: 800px)' }
)

experience.mode.addBreakpoint('desktop', true)

If you want to insert a mode in a specific position, specify the index as the third argument:

experience.mode.addBreakpoint('tablet', { mediaQuery: '(max-width: 1200px)' }, 1)

Next, define targets for your experience.

// OverlayTarget is a target that will be rendered over `targetEl`
experience.core.addOverlayTarget(
  // configuration to be activated in each mode
  modeCfg<GridTargetConfig>()
    // `default` mode configuration will be used as base. 
    // Any other mode will override the default configuration when enabled.
    .default({
      grid: {
        area: [['left', 'right']]
      }
    })
    // `mobile` mode configuration
    .add('mobile', {
      // this target will be disabled in mobile mode
      disabled: true
    })
    .build()
)


// BottomTarget is a target that will be rendered below `targetEl`
experience.core.addBottomTarget(
  modeCfg<ListTargetConfig>()
    .add('desktop', {
      disabled: true
    })
    .build()
)

Lastly, initialize the experience:

experience.init()

License

This SDK is distributed under the Apache License, Version 2.0. The Apache 2.0 License applies to the SDK only and not any other component of the SourceSync Platform.