Migration Guide

This migration guide will help developers transition from the old @securityside/realtime-js and @securityside/tf-realtime libraries to the new @securityside/rtas-base and @securityside/rtas-ui.

Major Changes

1. Optimization and Performance:

   • Both new libraries have been significantly optimized for better performance and lower resource consumption.
   • Both libraries were reduced approx. 1/4 of the older size.

2. Update dependencies:

   • Update all dependencies to the latest versions.

3. Removal of translations on @securityside/rtas-base:

   • Remove .setLanguage("PT_PT") and .setFallbackLanguage("EN_US") methods.

Migration Steps

Migrate from node package

note

This step refers to both libs but be careful, you should only follow the steps depending on the libs you are using.

1. Installation:

   • First, uninstall the old libraries:
   npm

   npm uninstall @securityside/realtime-js @securityside/tf-realtime

   yarn

   yarn remove @securityside/realtime-js @securityside/tf-realtime
   • Then, install the new ones:
   npm

   npm install @securityside/rtas-base @securityside/rtas-ui

   yarn

   yarn add @securityside/rtas-base @securityside/rtas-ui

2. Updating the Code:

   • rtas-base:

     • Replace all imports and references from @securityside/realtime-js to @securityside/rtas-base.
     Before

     import { TFRealTimeAuth } from '@securityside/realtime-js';
     
     const connection = new TFRealTimeAuth()
     	.setUrl("https://rtas.example.url")
     	.setToken("eyJhbGciOiJIUzI1NiIs....4ap76BW8KWv42GZqMuDNSauI77nZtU")
     	...
     	.build();
     After

     import { RTASBase } from '@securityside/rtas-base';
     
     const connection = new RTASBase()
     	.setUrl("https://rtas.example.url")
     	.setToken("eyJhbGciOiJIUzI1NiIs....4ap76BW8KWv42GZqMuDNSauI77nZtU")
     	...
     	.build();

   • rtas-ui:

     • Replace all imports and references from @securityside/tf-realtime to @securityside/rtas-ui.
     Before

     import { TFRealTime } from '@securityside/tf-realtime';
     
     const connection = new TFRealTime()
     	.setUrl("https://rtas.example.url")
     	.setToken("eyJhbGciOiJIUzI1NiIs....4ap76BW8KWv42GZqMuDNSauI77nZtU")
     	...
     	.build();
     After

     import { RTASUI } from '@securityside/rtas-ui';
     
     const connection = new RTASUI()
     	.setUrl("https://rtas.example.url")
     	.setToken("eyJhbGciOiJIUzI1NiIs....4ap76BW8KWv42GZqMuDNSauI77nZtU")
     	...
     	.build();

Migrate from html script import (umd)

1. Updating the Code:

   • rtas-base:

     • Replace all imports and references from @securityside/realtime-js to @securityside/rtas-base.
     Before

     <!-- Import bundle -->
     <script src="https://cdn.securityside.com/packages/realtime-auth/realtime-js/9.0.2/index.js"></script>
     
     <!-- Implement bundle -->
     <script type="text/javascript">
     
     	<!-- Implement the event where you want to run the script -->
     	document.addEventListener('DOMContentLoaded', function () {
     		const connection = new TFRealTimeAuth()
     			.setUrl("https://rtas.example.url")
     			.setToken("eyJhbGciOiJIUzI1NiIs....4ap76BW8KWv42GZqMuDNSauI77nZtU")
     			.setLanguage("PT_PT") // Removed
     			.setFallbackLanguage("EN_US") // Removed
     			...
     			.build();
     	});
     
     </script>
     After

     <!-- Import bundle -->
     <script src="https://cdn.securityside.com/packages/realtime-auth/rtas-base/0.0.2/index.umd.js"></script>
     
     <!-- Implement bundle -->
     <script type="text/javascript">
     
     	<!-- Implement the event where you want to run the script -->
     	document.addEventListener('DOMContentLoaded', function () {
     		const connection = new rtasbase.RTASBase()
     			.setUrl("https://rtas.example.url")
     			.setToken("eyJhbGciOiJIUzI1NiIs....4ap76BW8KWv42GZqMuDNSauI77nZtU")
     			...
     			.build();
     	});
     	
     </script>

   • rtas-ui:

     • Replace all imports and references from @securityside/tf-realtime to @securityside/rtas-ui.
     Before

     <!-- Html element where will render -->
     <div id="rtas"></div>
     
     <!-- Import bundle -->
     <script src="https://cdn.securityside.com/packages/realtime-auth/tf-realtime/9.0.2/index.js"></script>
     
     <!-- Implement bundle -->
     <script type="text/javascript">
     
     	<!-- Implement the event where you want to run the script -->
     	document.addEventListener('DOMContentLoaded', function () {
     		const connection = new TFRealTime()
     			.setTargetElement("#rtas")
     			.setToken("eyJhbGciOiJIUzI1N3Cy...")
     			.setUrl("https://rtas.example.url")
     			.setLanguage("PT_PT")
     			.setFallbackLanguage("EN_US")
     			...
     			.build()
     	});
     </script>
     After

     <!-- Html element where will render -->
     <div id="rtas"></div>
     
     <!-- Import bundle -->
     <script src="https://cdn.securityside.com/packages/realtime-auth/rtas-ui/0.0.3/index.umd.js"></script>
     
     <!-- Implement bundle -->
     <script type="text/javascript">
     
     	<!-- Implement the event where you want to run the script -->
     	document.addEventListener('DOMContentLoaded', function () {
     		const connection = new rtasui.RTASUI()
     			.setTargetElement("#rtas")
     			.setToken("eyJhbGciOiJIUzI1N3Cy...")
     			.setUrl("https://rtas.example.url")
     			.setLanguage("PT_PT")
     			.setFallbackLanguage("EN_US")
     			...
     			.build()
     	});
     </script>