@ionic/portals-react-native 0.5.2 → 0.7.0

package/package.json

@@ -1,86 +1,99 @@
 {
   "name": "@ionic/portals-react-native",
-  "version": "0.5.2",
-  "description": "Ionic Portals for React Native",
+  "version": "0.7.0",
+  "description": "Portals for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
     "src",
     "lib",
-    "android/build.gradle",
-    "android/gradle.properties",
-    "android/src/main",
+    "android",
     "ios",
     "cpp",
-    "ReactNativePortals.podspec",
-    "!lib/typescript/example",
+    "*.podspec",
     "!ios/build",
-    "!ios/Pods",
-    "!ios/**/xcuserdata",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "!**/.*"
   ],
   "scripts": {
+    "example": "yarn workspace @ionic/portals-react-native-example",
+    "webapp": "yarn workspace RNPortals",
     "test": "jest",
-    "typescript": "tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "docs": "typedoc --out ./docs/documentation ./src --tsconfig ./tsconfig.build.json",
-    "prepare": "bob build",
-    "release": "release-it",
-    "example": "yarn --cwd example",
-    "pods": "cd example && pod-install --quiet",
-    "bootstrap": "yarn example && yarn && yarn pods"
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build"
   },
   "keywords": [
     "react-native",
     "ios",
     "android"
   ],
-  "repository": "https://github.com/ionic-team/react-native-ionic-portals",
   "author": "Ionic <hi@ionicframework.com> (https://ionic.io/portals)",
   "license": "Commercial",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ionic-team/ionic-portals-react-native.git"
+  },
   "bugs": {
-    "url": "https://github.com/ionic-team/react-native-ionic-portals/issues"
+    "url": "https://github.com/ionic-team/ionic-portals-react-native/issues"
   },
-  "homepage": "https://github.com/ionic-team/react-native-ionic-portals#readme",
+  "homepage": "https://github.com/ionic-team/ionic-portals-react-native#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^11.0.0",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@release-it/conventional-changelog": "^2.0.0",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
-    "commitlint": "^11.0.0",
-    "eslint": "^7.2.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "husky": "^6.0.0",
-    "jest": "^26.0.1",
-    "pod-install": "^0.1.0",
-    "prettier": "^2.0.5",
-    "react": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-builder-bob": "^0.18.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.2.0",
+    "react-native": "0.74.2",
+    "react-native-builder-bob": "^0.23.2",
+    "release-it": "^15.0.0",
+    "turbo": "^1.10.7",
     "typedoc": "^0.23.16",
-    "typescript": "^4.1.3"
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
+  "workspaces": [
+    "example",
+    "web"
+  ],
+  "packageManager": "yarn@3.6.1",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/lib/",
+      "<rootDir>/web/"
     ]
   },
   "commitlint": {
@@ -91,7 +104,7 @@
   "eslintConfig": {
     "root": true,
     "extends": [
-      "@react-native-community",
+      "@react-native",
       "prettier"
     ],
     "rules": {
@@ -108,8 +121,14 @@
     }
   },
   "eslintIgnore": [
-    "node_modules/",
-    "lib/"
+    "example/**",
+    "lib/**",
+    "scripts/**",
+    "node_modules/**",
+    "ios/**",
+    "android/**",
+    "docs/**",
+    "web/**"
   ],
   "prettier": {
     "quoteProps": "consistent",
@@ -132,4 +151,4 @@
       ]
     ]
   }
-}
+}

package/src/{PortalView.android.tsx → BasePortalView.android.tsx}

@@ -4,7 +4,6 @@ import {
   requireNativeComponent,
   UIManager,
 } from 'react-native';
-import type { PortalProps } from '.';
 
 const PortalViewManager = requireNativeComponent('AndroidPortalView');
 
@@ -17,7 +16,7 @@ const createFragment = (viewId: number | null) =>
     [viewId]
   );
 
-const PortalView = (props: PortalProps) => {
+const BasePortalView = (props: any) => {
   const ref = useRef(null);
 
   useEffect(() => {
@@ -28,4 +27,4 @@ const PortalView = (props: PortalProps) => {
   return <PortalViewManager {...props} ref={ref} />;
 };
 
-export default PortalView;
+export default BasePortalView;

package/src/{PortalView.tsx → BasePortalView.tsx}

@@ -1,11 +1,10 @@
 import React from 'react';
 import { requireNativeComponent } from 'react-native';
-import type { PortalProps } from '.';
 
 const HostComponentPortal = requireNativeComponent('IONPortalView');
 
-const PortalView = (props: PortalProps) => {
+const BasePortalView = (props: any) => {
   return <HostComponentPortal {...props} />;
 };
 
-export default PortalView;
+export default BasePortalView;

package/src/{index.ts → index.tsx}

@@ -1,15 +1,44 @@
+import React from 'react';
 import {
-  EmitterSubscription,
+  type EmitterSubscription,
   NativeEventEmitter,
   NativeModules,
   Platform,
-  ViewProps,
+  type ViewProps,
 } from 'react-native';
+import BasePortalView from './BasePortalView';
 
 const { IONPortalPubSub, IONPortalsReactNative, IONPortalsWebVitals } =
   NativeModules;
 
-export { default as PortalView } from './PortalView';
+export const PortalView = (props: PortalProps) => {
+  let webVitals: string[] | undefined;
+  if (props.webVitals) {
+    webVitals = [];
+    if (props.webVitals.firstContentfulPaint) {
+      webVitals.push('fcp');
+      registerVital(
+        props.portal.name,
+        'fcp',
+        props.webVitals.firstContentfulPaint
+      );
+    }
+    if (props.webVitals.firstInputDelay) {
+      webVitals.push('fid');
+      registerVital(props.portal.name, 'fid', props.webVitals.firstInputDelay);
+    }
+    if (props.webVitals.timeToFirstByte) {
+      webVitals.push('ttfb');
+      registerVital(props.portal.name, 'ttfb', props.webVitals.timeToFirstByte);
+    }
+  }
+
+  const newProps = { ...props, webVitals: undefined };
+  // @ts-ignore
+  newProps.portal.webVitals = webVitals;
+
+  return <BasePortalView {...newProps} />;
+};
 
 /**
  * The data that is received from a subscription event.
@@ -24,8 +53,6 @@ export interface Message {
 
 const PortalsPubSub = new NativeEventEmitter(IONPortalPubSub);
 
-// const subscriptionMap = new Map<number, EmitterSubscription>();
-
 /**
  * Subscribes to messages for a topic
  *
@@ -64,12 +91,14 @@ interface WebVitalsEvent {
   duration: number;
 }
 
-export const onFirstContentfulPaint = async (
+const registerVital = (
   portalName: string,
+  vital: 'fcp' | 'fid' | 'ttfb',
   callback: (duration: number) => void
-): Promise<void> => {
+) => {
+  if (Platform.OS === 'ios' && vital !== 'fcp') return;
   const listener = WebVitals.addListener(
-    'vitals:fcp',
+    `vitals:${vital}`,
     (event: WebVitalsEvent) => {
       if (event.portalName === portalName) {
         callback(event.duration);
@@ -77,57 +106,13 @@ export const onFirstContentfulPaint = async (
     }
   );
 
-  await IONPortalsWebVitals.registerOnFirstContentfulPaint(portalName);
-  webVitalsMap.set(`${portalName}-vitals:fcp`, listener);
-};
-
-export const onFirstInputDelay = async (
-  portalName: string,
-  callback: (duration: number) => void
-) => {
-  if (Platform.OS === 'android') {
-    const listener = WebVitals.addListener(
-      'vitals:fid',
-      (event: WebVitalsEvent) => {
-        if (event.portalName === portalName) {
-          callback(event.duration);
-        }
-      }
-    );
-
-    await IONPortalsWebVitals.registerOnFirstInputDelay(portalName);
-    webVitalsMap.set(`${portalName}-vitals:fid`, listener);
-  }
+  webVitalsMap.set(`${portalName}-vitals:${vital}`, listener);
 };
 
-export const onTimeToFirstByte = async (
-  portalName: string,
-  callback: (duration: number) => void
-) => {
-  if (Platform.OS === 'android') {
-    const listener = WebVitals.addListener(
-      'vitals:ttfb',
-      (event: WebVitalsEvent) => {
-        if (event.portalName === portalName) {
-          callback(event.duration);
-        }
-      }
-    );
-
-    await IONPortalsWebVitals.registerOnTimeToFirstByte(portalName);
-    webVitalsMap.set(`${portalName}-vitals:ttfb`, listener);
-  }
-};
-
-export const registerWebVitals = async (
-  portalName: string,
-  firstContentfulPaint: (duration: number) => void,
-  firstInputDelay: (duration: number) => void,
-  timeToFirstByte: (duration: number) => void
-) => {
-  onFirstContentfulPaint(portalName, firstContentfulPaint);
-  onFirstInputDelay(portalName, firstInputDelay);
-  onTimeToFirstByte(portalName, timeToFirstByte);
+export type WebVitals = {
+  firstContentfulPaint?: (duration: number) => void;
+  firstInputDelay?: (duration: number) => void;
+  timeToFirstByte?: (duration: number) => void;
 };
 
 /**
@@ -184,48 +169,10 @@ export interface AssetMap {
   startDir?: string;
 }
 
-/**
- * A subset of {@link Portal} properties needed for rendering a Portal. `initialContext` can be used to override
- * any initialContext defined in the original {@link Portal} definition.
- */
-export type PortalProp = {
-  portal: Pick<Portal, 'name' | 'initialContext'>;
-};
-
 /**
  * Props needed for rendering a {@link Portal}
  */
-export type PortalProps = PortalProp & ViewProps;
-
-/**
- * Adds a Portal to an internal registry. Must be called before attempting to render a {@link PortalView}.
- *
- * @param portal The portal to add to the internal registry.
- * @returns Promise containing the Portal that was added to the registry.
- */
-export const addPortal = async (portal: Portal): Promise<Portal> => {
-  return IONPortalsReactNative.addPortal(portal);
-};
-
-/**
- * Adds all portals to an internal registry. This or {@link addPortal} must be called before attempting to render a {@link PortalView}
- *
- * @param portals The portals to add to the internal registry.
- * @returns Promise containing the Portals that were added to the registry.
- */
-export const addPortals = async (portals: Portal[]): Promise<Portal[]> => {
-  return IONPortalsReactNative.addPortals(portals);
-};
-
-/**
- * Gets a {@link Portal} previously registered via {@link addPortal} or {@link addPortals}.
- *
- * @param name The portal name to retrieve from the internal registry.
- * @returns Promise containing the registered {@link Portal}. If the {@link Portal} was not registered, the Promise will fail.
- */
-export const getPortal = async (name: string): Promise<Portal> => {
-  return IONPortalsReactNative.getPortal(name);
-};
+export type PortalProps = { portal: Portal; webVitals?: WebVitals } & ViewProps;
 
 export interface LiveUpdate {
   /** The AppFlow application ID */

package/ios/AssetMap+Dict.swift

@@ -1,28 +0,0 @@
-//
-//  AssetMap+Dict.swift
-//  ReactNativePortals
-//
-//  Created by Steven Sherry on 3/29/23.
-//  Copyright © 2023 Facebook. All rights reserved.
-//
-
-import IonicPortals
-
-extension AssetMap {
-    init?(_ dict: [String: Any]) {
-        guard let name = dict["name"] as? String else { return nil }
-        self.init(
-            name: name,
-            virtualPath: dict["virtualPath"] as? String,
-            startDir: dict["startDir"] as? String ?? ""
-        )
-    }
-    
-    var dict: [String: Any] {
-        return [
-            "name": name,
-            "virtualPath": virtualPath,
-            "startDir": startDir
-        ]
-    }
-}

package/ios/LiveUpdate+Dict.swift

@@ -1,30 +0,0 @@
-//
-//  LiveUpdate+Dict.swift
-//  ReactNativePortals
-//
-//  Created by Steven Sherry on 10/5/22.
-//  Copyright © 2022 Ionic. All rights reserved.
-//
-
-import IonicLiveUpdates
-
-extension LiveUpdate {
-    init?(_ dict: [String: Any]) {
-        guard let appId = dict["appId"] as? String,
-              let channel = dict["channel"] as? String,
-              let syncOnAdd = dict["syncOnAdd"] as? Bool
-        else { return nil }
-        
-        self.init(appId: appId, channel: channel, syncOnAdd: syncOnAdd)
-    }
-}
-
-extension LiveUpdate {
-    var dict: [String: Any] {
-        return [
-            "appId": appId,
-            "channel": channel,
-            "syncOnAdd": syncOnAdd
-        ]
-    }
-}

package/ios/LiveUpdateManagerError+Dict.swift

@@ -1,19 +0,0 @@
-//
-//  LiveUpdateManagerError+Dict.swift
-//  ReactNativePortals
-//
-//  Created by Steven Sherry on 10/5/22.
-//  Copyright © 2022 Ionic. All rights reserved.
-//
-
-import IonicLiveUpdates
-
-extension LiveUpdateManager.Error {
-    var dict: [String: Any] {
-        return [
-            "appId": appId,
-            "failStep": failStep.rawValue.uppercased(),
-            "message": localizedDescription
-        ]
-    }
-}