feat(ios, android): support loading font dynamically

driver/js/packages/hippy-react/src/index.ts

@@ -62,6 +62,7 @@ const {
   Device,
   HippyRegister,
   ImageLoader: ImageLoaderModule,
+  FontLoader: FontLoaderModule,
   NetworkInfo: NetInfo,
   UIManager: UIManagerModule,
   flushSync,
@@ -118,6 +119,7 @@ export {
   Clipboard,
   ConsoleModule,
   ImageLoaderModule,
+  FontLoaderModule,
   Platform,
   BackAndroid,
   Animation,

driver/js/packages/hippy-react/src/modules/font-loader-module.ts

@@ -0,0 +1,35 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Bridge } from '../global';
+
+/**
+ * Load font from remote url.
+ *
+ * @param {string} url - Remote font url.
+ * @param {string} fontFamily - Remote fontFamily name.
+ */
+function load(fontFamily: string, url: string) {
+  return Bridge.callNativeWithPromise('FontLoaderModule', 'load', fontFamily, url);
+}
+
+export {
+    load,
+};

driver/js/packages/hippy-react/src/native.ts

@@ -22,6 +22,7 @@ import * as HippyGlobal from './global';
 import * as Clipboard from './modules/clipboard';
 import * as Cookie from './modules/cookie-module';
 import * as ImageLoader from './modules/image-loader-module';
+import * as FontLoader from './modules/font-loader-module';
 import * as NetworkInfo from './modules/network-info';
 import * as UIManager from './modules/ui-manager-module';
 import BackAndroid from './modules/back-android';
@@ -52,6 +53,7 @@ export {
   Device,
   HippyRegister,
   ImageLoader,
+  FontLoader,
   NetworkInfo,
   UIManager,
   flushSync,

driver/js/packages/hippy-vue-next/src/runtime/native/index.ts

@@ -241,6 +241,10 @@ export interface NativeApiType {
     prefetch: (url: string) => void;
   };
 
+  FontLoader: {
+    load: (fontFamily: string, url: string) => Promise<undefined>;
+  };
+
   // include window and screen info
   Dimensions: Dimensions;
 
@@ -517,6 +521,24 @@ export const Native: NativeApiType = {
     },
   },
 
+  FontLoader: {
+    /**
+     * get image size before image rendering
+     *
+     * @param fontFamily
+     * @param url - image url
+     */
+    load(fontFamily, url): Promise<undefined> {
+      return Native.callNativeWithPromise.call(
+        this,
+        'FontLoaderModule',
+        'load',
+        fontFamily,
+        url,
+      );
+    },
+  },
+
   /**
    * Get the screen or view size.
    */

driver/js/packages/hippy-vue-next/src/types/native-modules.ts

@@ -22,6 +22,7 @@ import type { ClipboardModule } from './native-modules/clip-board-module';
 import type { DeviceEventModule } from './native-modules/device-event-module';
 import type { Http } from './native-modules/http';
 import type { ImageLoaderModule } from './native-modules/image-loader-module';
+import type { FontLoaderModule } from './native-modules/font-loader-module';
 import type { NetInfo } from './native-modules/net-info';
 import type { Network } from './native-modules/network';
 import type { TestModule } from './native-modules/test-module';
@@ -32,6 +33,7 @@ export interface NativeInterfaceMap {
   // The key here is the module name set by the native and cannot be changed at will.
   UIManagerModule: UiManagerModule;
   ImageLoaderModule: ImageLoaderModule;
+  FontLoaderModule: FontLoaderModule;
   websocket: Websocket;
   NetInfo: NetInfo;
   ClipboardModule: ClipboardModule;

driver/js/packages/hippy-vue-next/src/types/native-modules/font-loader-module.ts

@@ -0,0 +1,23 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * Hippy available.
+ *
+ * Copyright (C) 2022 THL A29 Limited, a Tencent company.
+ * All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface FontLoaderModule {
+  load: (fontFamily: string, url: string) => undefined;
+}

driver/js/packages/hippy-vue/src/runtime/native.ts

@@ -443,6 +443,20 @@ const Native: NeedToTyped = {
       callNative.call(this, 'ImageLoaderModule', 'prefetch', url);
     },
   },
+  /**
+   * operations for font
+   */
+  FontLoader: {
+    /**
+     * Download the font from the url.
+     *
+     * @param {string} fontFamily - The font family to download, 
+     * @param {string} url - The url where to download the font.
+     */
+    load(fontFamily: NeedToTyped, url: NeedToTyped) {
+      return callNativeWithPromise.call(this, 'FontLoaderModule', 'load', fontFamily, url);
+    },
+  },
   /**
    * Network operations
    */

framework/android/src/main/java/com/tencent/mtt/hippy/bridge/HippyCoreAPI.java

@@ -27,6 +27,7 @@
 import com.tencent.mtt.hippy.modules.nativemodules.console.ConsoleModule;
 import com.tencent.mtt.hippy.modules.nativemodules.deviceevent.DeviceEventModule;
 import com.tencent.mtt.hippy.modules.nativemodules.exception.ExceptionModule;
+import com.tencent.mtt.hippy.modules.nativemodules.font.FontLoaderModule;
 import com.tencent.mtt.hippy.modules.nativemodules.image.ImageLoaderModule;
 import com.tencent.mtt.hippy.modules.nativemodules.netinfo.NetInfoModule;
 import com.tencent.mtt.hippy.modules.nativemodules.network.NetworkModule;
@@ -84,6 +85,12 @@ public HippyNativeModuleBase get() {
                 return new ImageLoaderModule(context);
             }
         });
+        modules.put(FontLoaderModule.class, new Provider<HippyNativeModuleBase>() {
+            @Override
+            public HippyNativeModuleBase get() {
+                return new FontLoaderModule(context);
+            }
+        });
         modules.put(NetworkModule.class, new Provider<HippyNativeModuleBase>() {
             @Override
             public HippyNativeModuleBase get() {

framework/android/src/main/java/com/tencent/mtt/hippy/modules/nativemodules/font/FontLoaderModule.java

@@ -0,0 +1,46 @@
+/* Tencent is pleased to support the open source community by making Hippy available.
+ * Copyright (C) 2018 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.tencent.mtt.hippy.modules.nativemodules.font;
+
+import com.tencent.mtt.hippy.HippyEngineContext;
+import com.tencent.mtt.hippy.annotation.HippyMethod;
+import com.tencent.mtt.hippy.annotation.HippyNativeModule;
+import com.tencent.mtt.hippy.modules.Promise;
+import com.tencent.mtt.hippy.modules.nativemodules.HippyNativeModuleBase;
+import com.tencent.renderer.NativeRender;
+import com.tencent.renderer.NativeRendererManager;
+import com.tencent.renderer.component.text.FontLoader;
+
+@HippyNativeModule(name = "FontLoaderModule")
+public class FontLoaderModule extends HippyNativeModuleBase {
+
+    private final FontLoader mFontLoader;
+    private final NativeRender mNativeRender;
+    private final int rootId;
+
+    public FontLoaderModule(HippyEngineContext context) {
+        super(context);
+        mFontLoader = new FontLoader(context.getVfsManager());
+        mNativeRender = NativeRendererManager.getNativeRenderer(context.getRootView().getContext());
+        rootId = context.getRootView().getId();
+    }
+
+    @HippyMethod(name = "load")
+    public void load(final String fontFamily, final String fontUrl, final Promise promise) {
+        mFontLoader.loadAndFresh(fontFamily, fontUrl, mNativeRender, rootId, promise);
+    }
+}

framework/ios/module/fontLoader/HippyFontLoaderModule.h

@@ -0,0 +1,36 @@
+/*!
+* iOS SDK
+*
+* Tencent is pleased to support the open source community by making
+* Hippy available.
+*
+* Copyright (C) 2019 THL A29 Limited, a Tencent company.
+* All rights reserved.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+#import <Foundation/Foundation.h>
+#import "HippyBridgeModule.h"
+
+static NSString *const HippyLoadFontNotification = @"HippyLoadFontNotification";
+
+@interface HippyFontLoaderModule : NSObject<HippyBridgeModule>
+
+@property (nonatomic, readonly) NSString *fontDir;
+@property (nonatomic, readonly) NSString *fontUrlCachePath;
+
+- (NSString *)getFontPath:(NSString *)url;
+- (BOOL)registerFontFromURL:(NSString *)urlString error:(NSError *)error;
+
+@end