@blotch/angular-lynx-native 0.0.0-placeholder → 22.2.2

package/templates/android/app/proguard-rules.pro

@@ -0,0 +1,65 @@
+# Lynx's keep rules, from Lynx's integration guide
+# (https://lynxjs.org/guide/start/integrate-with-existing-apps). Only used once
+# isMinifyEnabled is turned on in build.gradle.kts.
+# LYNX START
+# use @Keep to annotate retained classes.
+-dontwarn android.support.annotation.Keep
+-keep @android.support.annotation.Keep class **
+-keep @android.support.annotation.Keep class ** {
+    @android.support.annotation.Keep <fields>;
+    @android.support.annotation.Keep <methods>;
+}
+-dontwarn androidx.annotation.Keep
+-keep @androidx.annotation.Keep class **
+-keep @androidx.annotation.Keep class ** {
+    @androidx.annotation.Keep <fields>;
+    @androidx.annotation.Keep <methods>;
+}
+# native method call
+-keepclasseswithmembers,includedescriptorclasses class * {
+    native <methods>;
+}
+-keepclasseswithmembers class * {
+    @com.lynx.tasm.base.CalledByNative <methods>;
+}
+
+# to customize a module, you need to keep the class name and the method annotated as LynxMethod.
+-keepclasseswithmembers class * {
+    @com.lynx.jsbridge.LynxMethod <methods>;
+}
+
+-keepclassmembers class *  {
+    @com.lynx.tasm.behavior.LynxProp <methods>;
+    @com.lynx.tasm.behavior.LynxPropGroup <methods>;
+    @com.lynx.tasm.behavior.LynxUIMethod <methods>;
+}
+
+-keepclassmembers class com.lynx.tasm.behavior.ui.UIGroup {
+    public boolean needCustomLayout();
+}
+
+# in case R8 compiler may remove mLoader in bytecode.
+# as mLoader is not used in java and passed as a WeakRef in JNI.
+-keepclassmembers class com.lynx.tasm.LynxTemplateRender {
+    private com.lynx.tasm.core.resource.LynxResourceLoader mLoader;
+    private com.lynx.tasm.core.resource.LynxResourceLoader mResourceLoader;
+}
+
+# the automatically generated setter classes use the class names of LynxBaseUI and ShadowNode and their subclasses.
+-keep class com.lynx.tasm.behavior.ui.LynxBaseUI
+-keep class com.lynx.tasm.behavior.shadow.ShadowNode
+-keep class com.lynx.jsbridge.LynxModule { *; }
+-keep class * extends com.lynx.tasm.behavior.ui.LynxBaseUI
+-keep class * extends com.lynx.tasm.behavior.shadow.ShadowNode
+-keep class * extends com.lynx.jsbridge.LynxModule { *; }
+-keep class * extends com.lynx.jsbridge.LynxContextModule
+-keep class * implements com.lynx.tasm.behavior.utils.Settable
+-keep class * implements com.lynx.tasm.behavior.utils.LynxUISetter
+-keep class * implements com.lynx.tasm.behavior.utils.LynxUIMethodInvoker
+-keep class com.lynx.tasm.rendernode.compat.**{
+    *;
+}
+-keep class com.lynx.tasm.rendernode.compat.RenderNodeFactory{
+    *;
+}
+# LYNX END

package/templates/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- fetch() and XMLHttpRequest go through Lynx's HTTP service. -->
+    <uses-permission android:name="android.permission.INTERNET" />
+    <!-- angular-lynx:permissions -->
+
+    <application
+        android:name=".ShellApplication"
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.AngularLynxShell">
+        <!--
+          One activity holding one LynxView; Angular Router does all navigation
+          inside it. configChanges keeps the activity (and the running Angular
+          app) alive on rotation, resizing and dark-mode switches instead of
+          restarting it; the LynxView re-lays itself out.
+        -->
+        <activity
+            android:name=".MainActivity"
+            android:configChanges="orientation|screenSize|screenLayout|smallestScreenSize|keyboard|keyboardHidden|navigation|uiMode"
+            android:exported="true"
+            android:launchMode="singleTask"
+            android:screenOrientation="${screenOrientation}"
+            android:windowSoftInputMode="adjustResize">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+            <!-- angular-lynx:deep-links -->
+        </activity>
+    </application>
+
+</manifest>

package/templates/android/app/src/main/java/dev/angularlynx/shell/BundleAssets.kt

@@ -0,0 +1,45 @@
+package dev.angularlynx.shell
+
+import android.content.Context
+import android.net.Uri
+import java.io.IOException
+
+/**
+ * The app's dist/ folder is copied into the APK's assets/ (by the AngularLynx
+ * generator), so every bundle and static file the Angular app references is an
+ * asset. These helpers turn the URLs Lynx hands us into asset paths.
+ */
+object BundleAssets {
+    /** The bundle the activity renders. */
+    const val MAIN_BUNDLE = "main.lynx.bundle"
+
+    /**
+     * Maps a URL from the bundle to a path inside assets/, or null when it
+     * points somewhere else (http(s), data:, content:...).
+     *
+     * Rspeedy's default asset prefix is "/", so bundled files arrive as
+     * "/static/image/x.png" or, for lazy bundles, "/async/x.lynx.bundle".
+     * "asset:///" (Fresco's scheme) and plain relative paths also work, so
+     * the same bundle runs whatever prefix it was built with.
+     */
+    fun assetPath(url: String): String? {
+        val path = when {
+            url.startsWith("asset:///") -> url.removePrefix("asset:///")
+            url.startsWith("file:///android_asset/") -> url.removePrefix("file:///android_asset/")
+            Uri.parse(url).scheme == null -> url.removePrefix("./").trimStart('/')
+            else -> return null
+        }
+        // Drop the query and fragment; assets are plain files.
+        return path.substringBefore('?').substringBefore('#').ifEmpty { null }
+    }
+
+    fun read(context: Context, path: String): ByteArray =
+        context.assets.open(path).use { it.readBytes() }
+
+    fun exists(context: Context, path: String): Boolean = try {
+        context.assets.open(path).close()
+        true
+    } catch (_: IOException) {
+        false
+    }
+}

package/templates/android/app/src/main/java/dev/angularlynx/shell/MainActivity.kt

@@ -0,0 +1,96 @@
+package dev.angularlynx.shell
+
+import android.os.Bundle
+import android.util.Log
+import android.widget.FrameLayout
+import androidx.activity.ComponentActivity
+import androidx.activity.OnBackPressedCallback
+import androidx.activity.enableEdgeToEdge
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import com.lynx.react.bridge.JavaOnlyArray
+import com.lynx.tasm.LynxBooleanOption
+import com.lynx.tasm.LynxError
+import com.lynx.tasm.LynxView
+import com.lynx.tasm.LynxViewBuilder
+import com.lynx.tasm.LynxViewClient
+
+/**
+ * The whole app: one full-screen LynxView running the Angular app. Angular
+ * Router navigates inside it, so there is no native navigation stack.
+ */
+class MainActivity : ComponentActivity(), ShellModule.Host {
+    private lateinit var lynxView: LynxView
+
+    // Disabled until the Angular app enables it (see ShellModule), so by
+    // default back leaves the app like any other root screen.
+    private val backHandler = object : OnBackPressedCallback(false) {
+        override fun handleOnBackPressed() {
+            lynxView.sendGlobalEvent(ShellModule.BACK_EVENT, JavaOnlyArray())
+        }
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        // Android 15+ always draws apps edge to edge; opting in on older
+        // versions too keeps the layout the same everywhere.
+        enableEdgeToEdge()
+        super.onCreate(savedInstanceState)
+
+        lynxView = LynxViewBuilder().apply {
+            setTemplateProvider(AssetTemplateProvider(this@MainActivity))
+            setTemplateResourceFetcher(AssetTemplateResourceFetcher(this@MainActivity))
+            setMediaResourceFetcher(AssetMediaResourceFetcher())
+            setEnableGenericResourceFetcher(LynxBooleanOption.TRUE)
+            setGenericResourceFetcher(AssetGenericResourceFetcher(this@MainActivity))
+            registerModule(ShellModule.NAME, ShellModule::class.java, this@MainActivity)
+        }.build(this)
+        lynxView.addLynxViewClient(object : LynxViewClient() {
+            override fun onReceivedError(error: LynxError?) {
+                Log.e(TAG, "Lynx error: ${error?.msg}")
+            }
+        })
+
+        // Keep the app inside the safe area (status bar, navigation bar and
+        // camera cutout) until the runtime exposes the insets to CSS.
+        val container = FrameLayout(this)
+        container.addView(lynxView, FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT)
+        ViewCompat.setOnApplyWindowInsetsListener(container) { view, insets ->
+            val safe = insets.getInsets(
+                WindowInsetsCompat.Type.systemBars() or
+                    WindowInsetsCompat.Type.displayCutout() or
+                    WindowInsetsCompat.Type.ime(),
+            )
+            view.setPadding(safe.left, safe.top, safe.right, safe.bottom)
+            WindowInsetsCompat.CONSUMED
+        }
+        setContentView(container)
+
+        onBackPressedDispatcher.addCallback(this, backHandler)
+        lynxView.renderTemplateUrl(BundleAssets.MAIN_BUNDLE, "")
+    }
+
+    override fun setBackHandlerEnabled(enabled: Boolean) {
+        backHandler.isEnabled = enabled
+    }
+
+    // Lynx pauses timers and animations in the background and fires the
+    // page's visibility events from these.
+    override fun onResume() {
+        super.onResume()
+        lynxView.onEnterForeground()
+    }
+
+    override fun onPause() {
+        lynxView.onEnterBackground()
+        super.onPause()
+    }
+
+    override fun onDestroy() {
+        lynxView.destroy()
+        super.onDestroy()
+    }
+
+    private companion object {
+        const val TAG = "AngularLynxShell"
+    }
+}

package/templates/android/app/src/main/java/dev/angularlynx/shell/ResourceFetchers.kt

@@ -0,0 +1,115 @@
+package dev.angularlynx.shell
+
+import android.content.Context
+import com.lynx.tasm.core.LynxThreadPool
+import com.lynx.tasm.provider.AbsTemplateProvider
+import com.lynx.tasm.resourceprovider.LynxResourceCallback
+import com.lynx.tasm.resourceprovider.LynxResourceRequest
+import com.lynx.tasm.resourceprovider.LynxResourceResponse
+import com.lynx.tasm.resourceprovider.generic.LynxGenericResourceFetcher
+import com.lynx.tasm.resourceprovider.media.LynxMediaResourceFetcher
+import com.lynx.tasm.resourceprovider.template.LynxTemplateResourceFetcher
+import com.lynx.tasm.resourceprovider.template.TemplateProviderResult
+import okhttp3.OkHttpClient
+import okhttp3.Request
+
+/**
+ * Lynx can't load anything by itself: the host app supplies loaders for
+ * bundles, images and other resources. Ours read the copy of dist/ inside the
+ * APK and fall back to HTTP for absolute http(s) URLs (an API, a CDN, or a dev
+ * server).
+ */
+
+private val http by lazy { OkHttpClient() }
+
+// LynxResourceResponse.onFailed is declared without a type parameter, so
+// Kotlin sees a raw type; this gives it the one each callback expects.
+@Suppress("UNCHECKED_CAST")
+private fun <T> failed(error: Throwable): LynxResourceResponse<T> =
+    LynxResourceResponse.onFailed(error) as LynxResourceResponse<T>
+
+/** Reads [url] from assets/ or over HTTP, off the UI thread. */
+private fun load(
+    context: Context,
+    url: String,
+    onSuccess: (ByteArray) -> Unit,
+    onFailure: (Throwable) -> Unit,
+) {
+    LynxThreadPool.getBriefIOExecutor().execute {
+        try {
+            val asset = BundleAssets.assetPath(url)
+            val bytes = if (asset != null) {
+                BundleAssets.read(context, asset)
+            } else {
+                http.newCall(Request.Builder().url(url).build()).execute().use { response ->
+                    check(response.isSuccessful) { "HTTP ${response.code} for $url" }
+                    response.body!!.bytes()
+                }
+            }
+            onSuccess(bytes)
+        } catch (error: Throwable) {
+            onFailure(Exception("Couldn't load $url: ${error.message}", error))
+        }
+    }
+}
+
+/** Loads the bundle passed to LynxView.renderTemplateUrl (the main bundle). */
+class AssetTemplateProvider(context: Context) : AbsTemplateProvider() {
+    private val context = context.applicationContext
+
+    override fun loadTemplate(url: String, callback: Callback) =
+        load(context, url, callback::onSuccess) { callback.onFailed(it.message) }
+}
+
+/**
+ * Loads every other bundle: lazy route chunks and dynamic components, which
+ * the main bundle requests by URL at runtime.
+ */
+class AssetTemplateResourceFetcher(context: Context) : LynxTemplateResourceFetcher() {
+    private val context = context.applicationContext
+
+    override fun fetchTemplate(
+        request: LynxResourceRequest,
+        callback: LynxResourceCallback<TemplateProviderResult>,
+    ) = load(
+        context,
+        request.url,
+        { callback.onResponse(LynxResourceResponse.onSuccess(TemplateProviderResult.fromBinary(it))) },
+        { callback.onResponse(failed(it)) },
+    )
+
+    // AngularLynx doesn't use Lynx's server-side rendering data.
+    override fun fetchSSRData(request: LynxResourceRequest, callback: LynxResourceCallback<ByteArray>) =
+        callback.onResponse(failed(UnsupportedOperationException("No SSR data")))
+}
+
+/**
+ * Images: rather than loading them, Lynx asks where they live and hands the
+ * answer to Fresco. Bundled images become asset:/// URIs, which Fresco reads
+ * from the APK; anything else (https:, data:) passes through unchanged.
+ */
+class AssetMediaResourceFetcher : LynxMediaResourceFetcher() {
+    override fun shouldRedirectUrl(request: LynxResourceRequest): String {
+        val asset = BundleAssets.assetPath(request.url) ?: return request.url
+        return "asset:///$asset"
+    }
+}
+
+/** Fonts, Lottie files and other resources the bundle loads by URL. */
+class AssetGenericResourceFetcher(context: Context) : LynxGenericResourceFetcher() {
+    private val context = context.applicationContext
+
+    override fun fetchResource(request: LynxResourceRequest, callback: LynxResourceCallback<ByteArray>) =
+        load(
+            context,
+            request.url,
+            { callback.onResponse(LynxResourceResponse.onSuccess(it)) },
+            { callback.onResponse(failed(it)) },
+        )
+
+    // Lynx asks for a file path only for resources it hands to native code
+    // that reads files; assets inside an APK have no path, so it falls back
+    // to fetchResource.
+    override fun fetchResourcePath(request: LynxResourceRequest, callback: LynxResourceCallback<String>) =
+        callback.onResponse(failed(UnsupportedOperationException("No file paths for assets")))
+}

package/templates/android/app/src/main/java/dev/angularlynx/shell/ShellApplication.kt

@@ -0,0 +1,39 @@
+package dev.angularlynx.shell
+
+import android.app.Application
+import com.facebook.drawee.backends.pipeline.Fresco
+import com.facebook.imagepipeline.core.ImagePipelineConfig
+import com.facebook.imagepipeline.memory.PoolConfig
+import com.facebook.imagepipeline.memory.PoolFactory
+import com.lynx.service.http.LynxHttpService
+import com.lynx.service.image.LynxImageService
+import com.lynx.service.log.LynxLogService
+import com.lynx.tasm.LynxEnv
+import com.lynx.tasm.service.LynxServiceCenter
+
+/**
+ * Starts Lynx once per process. Lynx requires its services and LynxEnv to be
+ * set up before the first LynxView is built, and Application.onCreate is the
+ * one place guaranteed to run first.
+ */
+class ShellApplication : Application() {
+    override fun onCreate() {
+        super.onCreate()
+
+        // LynxImageService draws <image> through Fresco, which must be
+        // initialized first. Fresco also understands asset:/// URIs natively,
+        // which is how bundled images are loaded (see AssetMediaResourceFetcher).
+        val pools = PoolFactory(PoolConfig.newBuilder().build())
+        Fresco.initialize(
+            this,
+            ImagePipelineConfig.newBuilder(this).setPoolFactory(pools).build(),
+        )
+        LynxServiceCenter.inst().registerService(LynxImageService.getInstance())
+        LynxServiceCenter.inst().registerService(LynxLogService)
+        LynxServiceCenter.inst().registerService(LynxHttpService)
+
+        // No global template provider or custom elements: MainActivity passes
+        // its loaders to the LynxView it builds.
+        LynxEnv.inst().init(this, null, null, null)
+    }
+}

package/templates/android/app/src/main/java/dev/angularlynx/shell/ShellModule.kt

@@ -0,0 +1,40 @@
+package dev.angularlynx.shell
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import com.lynx.jsbridge.LynxMethod
+import com.lynx.jsbridge.LynxModule
+
+/**
+ * Native module the AngularLynx runtime calls as
+ * `NativeModules.AngularLynxShell` (from the background thread, where
+ * NativeModules lives).
+ *
+ * The system back gesture is synchronous: Android needs to know before the
+ * gesture starts whether the app will handle it (predictive back shows a
+ * different animation either way). The Angular app can't answer in time, so it
+ * tells us ahead of time instead: it enables the back handler while the Router
+ * has somewhere to go back to. While enabled, back presses become an
+ * `angularLynxBack` global event; while disabled (the default, and whenever the
+ * runtime doesn't know about this module) Android's default back behavior
+ * applies, which leaves the app.
+ */
+class ShellModule(context: Context, param: Any?) : LynxModule(context, param) {
+    private val host = param as Host
+    private val main = Handler(Looper.getMainLooper())
+
+    interface Host {
+        fun setBackHandlerEnabled(enabled: Boolean)
+    }
+
+    @LynxMethod
+    fun setBackHandlerEnabled(enabled: Boolean) {
+        main.post { host.setBackHandlerEnabled(enabled) }
+    }
+
+    companion object {
+        const val NAME = "AngularLynxShell"
+        const val BACK_EVENT = "angularLynxBack"
+    }
+}

package/templates/android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#DD0031" />
+</shape>

package/templates/android/app/src/main/res/drawable/ic_launcher_foreground.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillColor="#FFFFFF"
+        android:pathData="M54,30 L76,78 L68,78 L63,66 L45,66 L40,78 L32,78 Z M48,59 L60,59 L54,44 Z" />
+</vector>

package/templates/android/app/src/main/res/mipmap/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Android 7 (API 24-25) has no adaptive icons, so it gets the two layers flattened. -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ic_launcher_background" />
+    <item android:drawable="@drawable/ic_launcher_foreground" />
+</layer-list>

package/templates/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Placeholder launcher icon; the generator replaces it with the app's icon. -->
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@drawable/ic_launcher_foreground" />
+</adaptive-icon>

package/templates/android/app/src/main/res/values/themes.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!--
+      No action bar: the Angular app draws the whole screen. The window
+      background shows before the first Lynx frame, so it matches the default
+      light/dark page background instead of flashing.
+    -->
+    <style name="Theme.AngularLynxShell" parent="android:Theme.Material.Light.NoActionBar">
+        <item name="android:windowBackground">@android:color/white</item>
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
+    </style>
+</resources>

package/templates/android/app/src/main/res/values-night/themes.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="Theme.AngularLynxShell" parent="android:Theme.Material.NoActionBar">
+        <item name="android:windowBackground">@android:color/black</item>
+        <item name="android:windowLightStatusBar">false</item>
+        <item name="android:windowLightNavigationBar">false</item>
+    </style>
+</resources>

package/templates/android/build.gradle.kts

@@ -0,0 +1,5 @@
+// AGP 9 compiles Kotlin itself (built-in Kotlin), so there is no separate
+// org.jetbrains.kotlin.android plugin to apply.
+plugins {
+    id("com.android.application") version "9.4.1" apply false
+}

package/templates/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,10 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionSha256Sum=9c0f7faeeb306cb14e4279a3e084ca6b596894089a0638e68a07c945a32c9e14
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.6.1-bin.zip
+networkTimeout=10000
+retries=0
+retryBackOffMs=500
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

package/templates/android/gradle.properties

@@ -0,0 +1,7 @@
+org.gradle.jvmargs=-Xmx4g -Dfile.encoding=UTF-8
+org.gradle.parallel=true
+org.gradle.caching=true
+# Fresco, which Lynx's image service uses, depends on AndroidX.
+android.useAndroidX=true
+android.nonTransitiveRClass=true
+kotlin.code.style=official