feat!: Update to IonicPortals 0.8.0 (#47)

* feat!: Update to IonicPortals 0.8.0
This includes breaking changes to the Pub/Sub system that leans on the
React Native event system.

.editorconfig

@@ -13,3 +13,6 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.{js,ts,tsx,jsx}]
+indent_size = 2

ReactNativePortals.podspec

@@ -16,6 +16,6 @@ Pod::Spec.new do |s|
  s.source_files = 'ios/**/*.{h,m,mm,swift}'
 
  s.dependency 'React-Core'
- s.dependency 'IonicPortals', '~> 0.7.3'
+ s.dependency 'IonicPortals', '~> 0.8.0'
  s.dependency 'IonicLiveUpdates', '~> 0.4.0'
 end

android/build.gradle

@@ -41,8 +41,8 @@ android {
 }
 
 tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
- sourceCompatibility = JavaVersion.VERSION_1_8
- targetCompatibility = JavaVersion.VERSION_1_8
+ sourceCompatibility = JavaVersion.VERSION_17
+ targetCompatibility = JavaVersion.VERSION_17
 
  kotlinOptions {
  freeCompilerArgs += '-opt-in=kotlin.RequiresOptIn'
@@ -123,7 +123,7 @@ dependencies {
  //noinspection GradleDynamicVersion
  api 'com.facebook.react:react-native:+'
  //noinspection GradleDynamicVersion
- api "io.ionic:portals:0.7.+"
+ api "io.ionic:portals:0.8.+"
  //noinspection GradleDynamicVersion
  api "io.ionic:liveupdates:0.4.+"
 

android/gradle.properties

@@ -1,4 +1,4 @@
-ReactNativePortals_kotlinVersion=1.6.21
-ReactNativePortals_compileSdkVersion=29
-ReactNativePortals_targetSdkVersion=29
+ReactNativePortals_kotlinVersion=1.8.0
+ReactNativePortals_compileSdkVersion=33
+ReactNativePortals_targetSdkVersion=33
 android.useAndroidX=true

android/src/main/java/io/ionic/portals/reactnative/PortalView.kt

@@ -62,22 +62,26 @@ internal class PortalViewManager(private val context: ReactApplicationContext) :
 
  private fun createFragment(root: FrameLayout, viewId: Int) {
  val viewState = fragmentMap[viewId] ?: return
- val portal = viewState.portal ?: return
+ val rnPortal = viewState.portal ?: return
 
  val parentView = root.findViewById<ViewGroup>(viewId)
  setupLayout(parentView)
 
- val portalFragment = PortalFragment(portal.portal)
- if (portal.onFCP != null || portal.onFID != null || portal.onTTFB != null) {
- portalFragment.webVitalsCallback = { metric, duration ->
+ val portal = rnPortal.builder.create()
+
+ if (rnPortal.onFCP != null || rnPortal.onFID != null || rnPortal.onTTFB != null) {
+ val vitalsPlugin = WebVitals { _, metric, duration ->
  when (metric) {
- WebVitals.Metric.FCP -> portal.onFCP?.let { it(duration) }
- WebVitals.Metric.FID -> portal.onFID?.let { it(duration) }
- WebVitals.Metric.TTFB -> portal.onTTFB?.let { it(duration) }
+ WebVitals.Metric.FCP -> rnPortal.onFCP?.let { it(duration) }
+ WebVitals.Metric.FID -> rnPortal.onFID?.let { it(duration) }
+ WebVitals.Metric.TTFB -> rnPortal.onTTFB?.let { it(duration) }
  }
  }
+ portal.addPluginInstance(vitalsPlugin)
  }
 
+ val portalFragment = PortalFragment(portal)
+
  viewState.initialContext?.let(portalFragment::setInitialContext)
  viewState.fragment = portalFragment
 

android/src/main/java/io/ionic/portals/reactnative/ReactNativePortalManager.kt

@@ -14,7 +14,7 @@ import java.util.concurrent.ConcurrentHashMap
 
 
 internal data class RNPortal(
- val portal: Portal,
+ val builder: PortalBuilder,
  val index: String?,
  val plugins: List<PortalPlugin>,
  var onFCP: ((Long) -> Unit)? = null,
@@ -115,17 +115,16 @@ internal object RNPortalManager {
  )
  }
 
- val portal = portalBuilder
+ portalBuilder
  .addPlugin(PortalsPlugin::class.java)
- .create()
 
  val rnPortal = RNPortal(
- portal = portal,
+ builder = portalBuilder,
  index = map.getString("index"),
  plugins = plugins
  )
 
- portals[rnPortal.portal.name] = rnPortal
+ portals[name] = rnPortal
  return rnPortal
  }
 

android/src/main/java/io/ionic/portals/reactnative/ReactNativePortalsModule.kt

@@ -106,6 +106,7 @@ fun List<*>.toReadableArray(): ReadableArray = fold(WritableNativeArray()) { arr
 
 internal fun RNPortal.toReadableMap(): ReadableMap {
  val map = WritableNativeMap()
+ val portal = builder.create()
  map.putString("name", portal.name)
  map.putString("startDir", portal.startDir)
  map.putArray("plugins", plugins.toReadableArray())

android/src/main/java/io/ionic/portals/reactnative/ReactNativePortalsPubSub.kt

@@ -3,38 +3,31 @@ package io.ionic.portals.reactnative
 import com.facebook.react.bridge.*
 import com.facebook.react.modules.core.DeviceEventManagerModule
 import com.getcapacitor.JSObject
-import io.ionic.portals.PortalsPlugin
+import io.ionic.portals.PortalsPubSub
 import org.json.JSONObject
+import java.util.concurrent.ConcurrentHashMap
 
 internal class PortalsPubSubModule(reactContext: ReactApplicationContext) :
  ReactContextBaseJavaModule(reactContext) {
  override fun getName() = "IONPortalPubSub"
-
- @ReactMethod
- fun subscribe(topic: String, promise: Promise) {
- val reference = PortalsPlugin.subscribe(topic) { result ->
- reactApplicationContext
- .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
- .emit("PortalsSubscription", result.toJSObject().toReactMap())
- }
-
- promise.resolve(reference)
- }
+ private val subscriptionRefs = ConcurrentHashMap<String, Int>()
 
  @ReactMethod
  fun publish(topic: String, data: ReadableMap) {
- PortalsPlugin.publish(topic, data.toJSObject())
+ PortalsPubSub.shared.publish(topic, data.toJSObject())
  }
 
- @ReactMethod
- fun unsubscribe(topic: String, reference: Int) {
- PortalsPlugin.unsubscribe(topic, reference)
- }
-
- // These are required to be an EventEmitter in javascript
-
  @ReactMethod
  fun addListener(eventName: String) {
+ val topic = eventName.removePrefix("PortalsSubscription:")
+ if (subscriptionRefs[topic] != null) { return }
+ val ref = PortalsPubSub.shared.subscribe(topic) { result ->
+ reactApplicationContext
+ .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+ .emit("PortalsSubscription:$eventName", result.toJSObject().toReactMap())
+ }
+
+ subscriptionRefs[eventName] = ref
  }
 
  @ReactMethod

example/.prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
- bracketSpacing: false,
+ bracketSpacing: true,
  singleQuote: true,
  trailingComma: 'all',
 };

example/App.tsx

@@ -11,6 +11,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import {
+ EmitterSubscription,
  SafeAreaView,
  ScrollView,
  StatusBar,
@@ -32,7 +33,6 @@ import {
  register,
  addPortal,
  subscribe,
- unsubscribe,
  publish,
  Message,
  PortalView,
@@ -50,35 +50,34 @@ const portal = {
 
 addPortal(portal);
 
-const PubSubLabel: React.FC<{ initialNumber: number }> = ({ initialNumber }) => {
+const PubSubLabel: React.FC<{ initialNumber: number }> = ({
+ initialNumber,
+}) => {
  const isDarkMode = useColorScheme() === 'dark';
  const [immutableNumber, setNumber] = useState(initialNumber);
- const [subRef, setSubRef] = useState(0);
+ const subRef = useRef<EmitterSubscription | null>(null);
  const number = useRef(initialNumber);
 
  useEffect(() => {
- const subscribeToButtonTapped = async () => {
- console.log('subscribing');
- const subRef = await subscribe('button:tapped', (message: Message) => {
- console.log(`Received message ${JSON.stringify(message.data, null, 2)} on topic ${message.topic} from IonicPortals`);
-
- number.current = number.current + 1;
- setNumber(number.current);
-
- publish('button:received', number.current + 1);
- });
-
- console.log('subscribed with subRef ', subRef);
- setSubRef(subRef);
- };
-
- subscribeToButtonTapped().catch(reason =>
- console.log('Failed for ', reason),
- );
+ subRef.current = subscribe('button:tapped', (message: Message) => {
+ console.log(
+ `Received message ${JSON.stringify(message.data, null, 2)} on topic ${
+ message.topic
+ } from IonicPortals`,
+ );
+
+ number.current = number.current + 1;
+ setNumber(number.current);
+
+ publish('button:received', number.current + 1);
+ if (number.current >= 5) {
+ subRef.current?.remove();
+ }
+ });
 
  return () => {
  console.log('Unsubscribing from ref ', subRef);
- unsubscribe('button:tapped', subRef);
+ subRef.current?.remove();
  };
  }, []);
 
@@ -142,7 +141,10 @@ const App = () => {
  backgroundColor: isDarkMode ? Colors.black : Colors.white,
  }}>
  <PubSubLabel initialNumber={1} />
- <PortalView portal={{ name: "button" }} style={{ flex: 1, height: 150 }} />
+ <PortalView
+ portal={{ name: 'button' }}
+ style={{ flex: 1, height: 150 }}
+ />
  <Section title="Step One">
  Edit <Text style={styles.highlight}>App.tsx</Text> to change this
  screen and then come back to see your edits.

example/android/build.gradle

@@ -4,9 +4,10 @@ buildscript {
  ext {
  buildToolsVersion = "31.0.0"
  minSdkVersion = 22
- compileSdkVersion = 32
- targetSdkVersion = 32
+ compileSdkVersion = 33
+ targetSdkVersion = 33
  ndkVersion = "21.4.7075529"
+ kotlinVersion = "1.8.0"
  }
  repositories {
  google()

example/ios/Podfile.lock

@@ -1,8 +1,8 @@
 PODS:
  - boost (1.76.0)
- - Capacitor (4.5.0):
+ - Capacitor (5.4.0):
  - CapacitorCordova
- - CapacitorCordova (4.5.0)
+ - CapacitorCordova (5.4.0)
  - CocoaAsyncSocket (7.6.5)
  - DoubleConversion (1.1.6)
  - FBLazyVector (0.68.1)
@@ -76,10 +76,10 @@ PODS:
  - FlipperKit/FlipperKitNetworkPlugin
  - fmt (6.2.1)
  - glog (0.3.5)
- - IonicLiveUpdates (0.2.2)
- - IonicPortals (0.7.0):
- - Capacitor (~> 4.4)
- - IonicLiveUpdates (< 0.3.0, >= 0.1.2)
+ - IonicLiveUpdates (0.4.1)
+ - IonicPortals (0.8.0):
+ - Capacitor (~> 5.0)
+ - IonicLiveUpdates (< 0.5.0, >= 0.1.2)
  - libevent (2.1.12)
  - OpenSSL-Universal (1.1.1100)
  - RCT-Folly (2021.06.28.00-v2):
@@ -354,11 +354,11 @@ PODS:
  - React-jsi (= 0.68.1)
  - React-logger (= 0.68.1)
  - React-perflogger (= 0.68.1)
- - ReactNativePortals (0.2.0):
- - IonicLiveUpdates (~> 0.2.0)
- - IonicPortals (~> 0.7.0)
+ - ReactNativePortals (0.4.1):
+ - IonicLiveUpdates (~> 0.4.0)
+ - IonicPortals (~> 0.8.0)
  - React-Core
- - SocketRocket (0.6.0)
+ - SocketRocket (0.6.1)
  - Yoga (1.14.0)
  - YogaKit (1.18.1):
  - Yoga (~> 1.14)
@@ -511,8 +511,8 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
  boost: a7c83b31436843459a1961bfd74b96033dc77234
- Capacitor: c09c7031f87bef4a4b9883866115806654ba0865
- CapacitorCordova: d6cf164af488874853a89579c06b877048a656ce
+ Capacitor: 8beac47eed31b2aedca82dfd1f2d4ba39ff1e6c4
+ CapacitorCordova: 728a2fa582fd749aedfabf1172e2d9034e474ec8
  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
  FBLazyVector: 2c76493a346ef8cacf1f442926a39f805fffec1f
@@ -528,8 +528,8 @@ SPEC CHECKSUMS:
  FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
  fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
  glog: 476ee3e89abb49e07f822b48323c51c57124b572
- IonicLiveUpdates: ab80edb1dae9cc474caf428b19cdbcfd65798f6e
- IonicPortals: fd21c96f9088312fc8d7ace4583c0a5f4e2ed876
+ IonicLiveUpdates: 6fbb00e7cf563474253092bedd2d3abd9e846e6d
+ IonicPortals: 03ff0375e2631857221de7696e89f90f55d36949
  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
  OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
  RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
@@ -557,11 +557,11 @@ SPEC CHECKSUMS:
  React-RCTVibration: 9e344c840176b0af9c84d5019eb4fed8b3c105a1
  React-runtimeexecutor: 7285b499d0339104b2813a1f58ad1ada4adbd6c0
  ReactCommon: bf2888a826ceedf54b99ad1b6182d1bc4a8a3984
- ReactNativePortals: c7609b8743bc5c49c1afbf5f3e5965ecb2c63eca
- SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
+ ReactNativePortals: 5f69f8105ce6aeb82900fed934ec58923360fa3e
+ SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
  Yoga: 17cd9a50243093b547c1e539c749928dd68152da
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
 PODFILE CHECKSUM: ce3ca40baa3c31370abd8290f0c7d4e8adf62932
 
-COCOAPODS: 1.11.2
+COCOAPODS: 1.12.1