@applicaster/quick-brick-core 12.0.0-alpha.6602834797 → 12.0.0-alpha.7539319320

package/App/AssetCache/index.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../" />
 import * as R from "ramda";
-import { log_debug, log_warning } from "./logger";
+import { log_debug, log_verbose, log_warning } from "./logger";
 import { CacheManager } from "./CacheManager";
 
 import {
@@ -84,6 +84,8 @@ export async function cacheAssets({
     };
   }
 
+  const time = performance.now();
+
   try {
     const { assetFiles, cellAssets, pluginAssets, layoutAssets } =
       await getLayoutAssets({
@@ -141,18 +143,20 @@ export async function cacheAssets({
 
     newCacheState.forEach(({ file, url }) => (urlFileMap[url] = file));
 
-    const updatedLayout = remapAssetPath(layoutAssets, layout, urlFileMap);
+    const updatedLayout = remapAssetPath(layoutAssets, layout, urlFileMap, "layoutAssets");
 
     const updatedPluginConfigurations = remapAssetPath(
       pluginAssets,
       pluginConfigurations,
-      urlFileMap
+      urlFileMap,
+      "pluginAssets"
     );
 
     const updatedCellStyles = remapAssetPath(
       cellAssets,
       cellStyles,
-      urlFileMap
+      urlFileMap,
+      "cellStyles"
     );
 
     return {
@@ -164,5 +168,7 @@ export async function cacheAssets({
     log_warning(`cacheAssets: Error caching assets, message: ${error.message}`);
 
     return { layout, pluginConfigurations, cellStyles };
+  } finally {
+    log_verbose(`cacheAssets: caching assets took ${performance.now() - time} ms`);
   }
 }

package/App/ThemeManager/index.tsx

@@ -1,8 +1,9 @@
 import * as R from "ramda";
 import * as React from "react";
 
+import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   mapKeys,
   partitionByKeys,
@@ -35,7 +36,7 @@ function populateTheme(plugin) {
 
 const TABLET_PREFIX = "tablet_";
 
-const prepareForTablet = (dimensions) => (themeProps) => {
+const prepareForTablet = (isTablet) => (themeProps) => {
   const [tabletThemeProps, mobileTheme] = partitionByKeys(
     R.compose(R.startsWith(TABLET_PREFIX), R.head),
     themeProps
@@ -62,12 +63,12 @@ const prepareForTablet = (dimensions) => (themeProps) => {
     R.omit(["tablet_theme"])
   )(tabletThemeProps);
 
-  return dimensions.deviceInfo.isTablet ? tabletTheme : mobileTheme;
+  return isTablet ? tabletTheme : mobileTheme;
 };
 
-const selectThemes = (dimensions, plugins) =>
+const selectThemes = (isTablet, plugins) =>
   R.compose(
-    R.map(prepareForTablet(dimensions)),
+    R.map(prepareForTablet(isTablet)),
     R.fromPairs,
     R.reject(R.isNil),
     R.map(populateTheme),
@@ -80,36 +81,38 @@ const ThemeContextProvider = ({
   setSelectedThemeId,
   children,
 }: any) => {
-  const value = React.useMemo(
-    () => ({ themes, selectedThemeId, setSelectedThemeId }),
-    [themes, selectedThemeId, setSelectedThemeId]
-  );
+  const value = { themes, selectedThemeId, setSelectedThemeId };
 
   return (
     <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
   );
 };
 
+const MemoizedThemeContextProvider = React.memo(
+  ThemeContextProvider,
+  isEqual({
+    byValue: ["selectedThemeId", "setSelectedThemeId"],
+    byReference: ["children", "themes"],
+  })
+);
+
 function ThemeManagerComponent({ children, plugins }: Props) {
-  const dimensions = useDimensions("screen", { deviceInfo: true });
-  const [themes, setThemes] = React.useState(selectThemes(dimensions, plugins));
+  const isTablet = useIsTablet();
+
+  const themes = selectThemes(isTablet, plugins);
 
   const [selectedThemeId, setSelectedThemeId] =
     React.useState(DEFAULT_THEME_ID);
 
-  React.useEffect(() => {
-    setThemes(selectThemes(dimensions, plugins));
-  }, [plugins, dimensions]);
-
   return (
-    <ThemeContextProvider
+    <MemoizedThemeContextProvider
       themes={themes}
       selectedThemeId={selectedThemeId}
       setSelectedThemeId={setSelectedThemeId}
     >
       {children}
-    </ThemeContextProvider>
+    </MemoizedThemeContextProvider>
   );
 }
 
-export const ThemeManager = React.memo<Props>(ThemeManagerComponent);
+export const ThemeManager = ThemeManagerComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-core",
-  "version": "12.0.0-alpha.6602834797",
+  "version": "12.0.0-alpha.7539319320",
   "description": "Core package for Applicaster's Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -30,13 +30,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.6602834797",
-    "@applicaster/quick-brick-core-plugins": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-pipes-v2-client": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.6602834797",
+    "@applicaster/applicaster-types": "12.0.0-alpha.7539319320",
+    "@applicaster/quick-brick-core-plugins": "12.0.0-alpha.7539319320",
+    "@applicaster/zapp-pipes-v2-client": "12.0.0-alpha.7539319320",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.7539319320",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.7539319320",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.7539319320",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7539319320",
     "atob": "^2.1.2",
     "axios": "^0.21.2",
     "btoa": "^1.2.1",