refactor: components cdn (#1110)

* refactor(wip): separate components files into zips and assets dir

* refactor(wip): use new components package and cdn in mobile

* chore: add components to metro config

* chore: bump snjs with new web assets path

* refactor: exclude package.json files recursively from being copied into components dist folder to avoid conflicts with react native duplicates

packages/mobile/metro.config.js

@@ -23,6 +23,7 @@ module.exports = (async () => {
       __dirname,
       path.resolve(__dirname, '../icons'),
       path.resolve(__dirname, '../styles'),
+      '../components',
     ],
     transformer: {
       getTransformOptions: async () => ({

packages/mobile/package.json

@@ -32,7 +32,7 @@
     "@react-navigation/elements": "^1.3.3",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/stack": "^6.2.1",
-    "@standardnotes/components": "1.9.1",
+    "@standardnotes/components-meta": "workspace:*",
     "@standardnotes/filepicker": "^1.16.14",
     "@standardnotes/icons": "workspace:*",
     "@standardnotes/react-native-aes": "^1.4.3",
@@ -122,6 +122,10 @@
   "jest": {
     "preset": "react-native"
   },
+  "componentsCdn": {
+    "dev": "https://app-dev.standardnotes.com/components/zips",
+    "prod": "https://app.standardnotes.com/components/zips"
+  },
   "detox": {
     "configurations": {
       "ios.sim.debug": {

packages/mobile/src/Lib/Application.ts

@@ -14,7 +14,7 @@ import {
   SNComponentManager,
 } from '@standardnotes/snjs'
 import { Platform } from 'react-native'
-import VersionInfo from 'react-native-version-info'
+
 import { version } from '../../package.json'
 import { MobileAlertService } from './AlertService'
 import { ApplicationState, UnlockTiming } from './ApplicationState'
@@ -28,6 +28,7 @@ import { PreferencesManager } from './PreferencesManager'
 import { SNReactNativeCrypto } from './ReactNativeCrypto'
 import { ReviewService } from './ReviewService'
 import { StatusManager } from './StatusManager'
+import { IsDev } from './Utils'
 
 type MobileServices = {
   applicationState: ApplicationState
@@ -39,8 +40,6 @@ type MobileServices = {
   filesService: FilesService
 }
 
-const IsDev = VersionInfo.bundleIdentifier?.includes('dev')
-
 export class MobileApplication extends SNApplication {
   private MobileServices!: MobileServices
   public editorGroup: NoteGroupController

packages/mobile/src/Lib/ComponentManager.ts

@@ -1,5 +1,5 @@
 import { MobileTheme } from '@Root/Style/MobileTheme'
-import FeatureChecksums from '@standardnotes/components/dist/checksums.json'
+import FeatureChecksums from '@standardnotes/components-meta/dist/zips/checksums.json'
 import { FeatureDescription, FeatureIdentifier, GetFeatures } from '@standardnotes/features'
 import {
   ComponentMutator,
@@ -17,7 +17,9 @@ import { Base64 } from 'js-base64'
 import RNFS, { DocumentDirectoryPath } from 'react-native-fs'
 import StaticServer from 'react-native-static-server'
 import { unzip } from 'react-native-zip-archive'
+import { componentsCdn } from '../../package.json'
 import { MobileThemeContent } from '../Style/MobileTheme'
+import { IsDev } from './Utils'
 
 type TFeatureChecksums = {
   [key in FeatureIdentifier]: {
@@ -76,10 +78,19 @@ export class ComponentManager extends SNComponentManager {
     void this.staticServer!.stop()
   }
 
-  public isComponentDownloadable(component: SNComponent): boolean {
+  private downloadUrlForComponent(component: SNComponent): string | undefined {
     const identifier = component.identifier
     const nativeFeature = this.nativeFeatureForIdentifier(identifier)
-    const downloadUrl = nativeFeature?.download_url || component.package_info?.download_url
+    if (nativeFeature) {
+      const cdn = IsDev ? componentsCdn.dev : componentsCdn.prod
+      return `${cdn}/${identifier}.zip`
+    } else {
+      return component.package_info?.download_url
+    }
+  }
+
+  public isComponentDownloadable(component: SNComponent): boolean {
+    const downloadUrl = this.downloadUrlForComponent(component)
     return !!downloadUrl
   }
 
@@ -94,7 +105,7 @@ export class ComponentManager extends SNComponentManager {
   public async doesComponentNeedDownload(component: SNComponent): Promise<boolean> {
     const identifier = component.identifier
     const nativeFeature = this.nativeFeatureForIdentifier(identifier)
-    const downloadUrl = nativeFeature?.download_url || component.package_info?.download_url
+    const downloadUrl = this.downloadUrlForComponent(component)
 
     if (!downloadUrl) {
       throw Error('Attempting to download component with no download url')
@@ -114,8 +125,7 @@ export class ComponentManager extends SNComponentManager {
 
   public async downloadComponentOffline(component: SNComponent): Promise<ComponentLoadingError | undefined> {
     const identifier = component.identifier
-    const nativeFeature = this.nativeFeatureForIdentifier(identifier)
-    const downloadUrl = nativeFeature?.download_url || component.package_info?.download_url
+    const downloadUrl = this.downloadUrlForComponent(component)
 
     if (!downloadUrl) {
       throw Error('Attempting to download component with no download url')

packages/mobile/src/Lib/Utils.ts

@@ -1,4 +1,7 @@
 import { TEnvironment } from '@Root/App'
+import VersionInfo from 'react-native-version-info'
+
+export const IsDev = VersionInfo.bundleIdentifier?.includes('dev')
 
 export function isNullOrUndefined(value: unknown) {
   return value === null || value === undefined