@leonsilicon/react-native-wishlist 0.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2022 Margelo GmbH
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/MGWishList.podspec

@@ -0,0 +1,40 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+# This package only supports the New Architecture.
+# As of React Native 0.82+, the New Architecture is the default. We only fail
+# if it was explicitly disabled.
+if ENV["RCT_NEW_ARCH_ENABLED"] == "0"
+  raise "@leonsilicon/react-native-wishlist requires the New Architecture. " \
+        "Please remove RCT_NEW_ARCH_ENABLED=0 before running `pod install`."
+end
+
+Pod::Spec.new do |s|
+  s.name         = "MGWishList"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.description  = <<-DESC
+                  The fastest List component for React Native.
+                   DESC
+  s.homepage     = "https://github.com/margelo/react-native-wishlist"
+  s.license      = "MIT"
+  # s.license    = { :type => "MIT", :file => "FILE_LICENSE" }
+  s.author       = { "author" => "author@domain.cn" }
+  s.platforms    =  { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/margelo/react-native-wishlist.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{mm,h,m,cpp,hpp}",
+    "cpp/**/*.{cpp,h,m,mm,hpp}",
+  ]
+
+  s.pod_target_xcconfig = {
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
+    "GCC_PREPROCESSOR_DEFINITIONS" => "$(inherited) RCT_NEW_ARCH_ENABLED=1",
+  }
+
+  install_modules_dependencies(s)
+  s.dependency 'react-native-worklets-core'
+end
+

package/README.md

@@ -0,0 +1,281 @@
+# @leonsilicon/react-native-wishlist
+
+The fastest List component for React Native.
+
+
+```jsx
+function ChatRoom({ room }) {
+  return (
+    <Wishlist.Component data={room.messages}>
+      <Wishlist.Template type="text-message">
+        <TextMessageCell />
+      </Wishlist.Template>
+      <Wishlist.Template type="image-message">
+        <ImageMessageCell />
+      </Wishlist.Template>
+    </Wishlist.Component>
+  )
+}
+```
+
+## State of WishList
+
+WishList is an archived, read-only repository, and should probably not be used in production. It's a good proof of concept, and a pretty impressive experiment. See [this Notion document](https://margelo.notion.site/WishList-Summit-b20c24d1f0da4889a0513dfa929be5ed?pvs=74) for more details.
+
+## Installation
+
+```sh
+vp add @leonsilicon/react-native-wishlist
+cd ios && pod install
+```
+
+## Usage
+
+# Documentation
+
+WishList uses a **template-based** approach, which is fundamentally different than FlatList's approach.
+
+In a chat app, you might want to have three templates:
+
+* A chat message containing text
+* A chat message containing an image
+* A system message (e.g. "You have been removed from this group")
+
+Each template is rendered once, and while the user scrolls in the list, the template cells are re-used ("_recycled_") by just moving them around and updating their content.
+
+A chat cell has static properties and template values:
+
+* Static property: The chat room name, the user name
+* Template value: The chat message itself, the sender
+
+## The data
+
+In a List, you usually want to render an array of data. Per each item in the array, you want to render one cell in the list.
+
+Data for WishList has to have the following structure:
+
+```ts
+type Item = {
+  type: string
+  key: string
+}
+```
+
+Where `type` is the predefined template you want to render, and `key` is a unique key to identify a cell.
+
+For the chat app, this might look like this:
+
+```ts
+type TextChatMessage = {
+  type: 'text-message'
+  key: string
+  sender: User
+  text: string
+}
+type ImageChatMessage = {
+  type: 'image-message'
+  key: string
+  sender: User
+  imageUrl: string
+}
+type SystemChatMessage = {
+  type: 'system-message'
+  key: string
+  text: string
+}
+
+type ChatMessage =
+  | TextChatMessage
+  | ImageChatMessage
+  | SystemChatMessage
+type Data = ChatMessage[]
+```
+
+WishList provides a `useData` hook to imperatively update the data synchronously, which is usefuly for loading data as you scroll.
+
+## The List
+
+The list component itself is the parent of all content cells, and can be styled and configured to match your needs.
+
+```jsx
+function ChatRoom({ room }) {
+  return (
+    <Wishlist.Component
+      style={styles.list}
+      initialIndex={room.messages.length - 1} // aka inverted
+      initialData={room.messages}
+      ref={ref}>
+      <Wishlist.Template type="text-message">
+        <TextMessageCell roomName={room.name} />
+      </Wishlist.Template>
+      <Wishlist.Template type="image-message">
+        <ImageMessageCell roomName={room.name} />
+      </Wishlist.Template>
+      <Wishlist.Template type="system-message">
+        <SystemMessageCell roomName={room.name} />
+      </Wishlist.Template>
+    </Wishlist.Component>
+  )
+}
+```
+
+## The Cells
+
+Because WishList uses cell recycling, a cell is only _rendered_ once. WishList then uses that render result of a cell (the **template**) to move it around and update the content of the template as the user scrolls.
+
+This means, that the React component's render function (e.g. `<TextMessageCell>`) is only called once to build the template, and the content itself is then updated through a custom update pipeline.
+
+The custom update pipeline is ran fully on the UI Thread using Worklets.
+
+For example, in **FlatList** you would have the following cell:
+
+```jsx
+function TextMessageCell(message: TextChatMessage) {
+  return (
+    <View style={styles.cell}>
+      <Text style={styles.username}>
+        {message.sender.username}
+      </Text>
+    </View>
+  )
+}
+```
+
+Where `message` is a template-value, and the Text's content (`message.sender.username`) is a derived template-value.
+
+In FlatList, the cell's render function gets called every time, whereas in WishList it only gets called once for the template.
+
+To build the same cell in WishList, you would write the following:
+
+```jsx
+function TextMessageCell() {
+  const username = useTemplateValue<TextChatMessage>(message => message.sender.username)
+
+  return (
+    <View style={styles.cell}>
+      <WishList.Text style={styles.username}>
+        {username}
+      </WishList.Text>
+    </View>
+  )
+}
+```
+
+In this case, `username` is a Proxy that holds the JSI HostObject, which is synchronized across threads.
+
+We need to use `<WishList.Text>` instead of `<Text>` so that the update pipeline is able to imperatively update it's content on the UI Thread.
+
+### Components
+
+For template-values, you need to use components that are able to update content directly;
+
+* `<WishList.View>` instead of `<View>`
+* `<WishList.Text>` instead of `<Text>`
+* `<WishList.Image>` instead of `<Image>`
+* `<WishList.Pressable>` instead of `<Pressable>`
+
+### Conditionals
+
+Since the React component is only rendered once, conditionals in the render tree won't work.
+
+In **FlatList**, you might have an inline conditional:
+
+```jsx
+function TextMessageCell(message) {
+  return (
+    <View style={styles.cell}>
+      {message.isSender && (<DeleteButton />)}
+
+      ...
+    </View>
+  )
+}
+```
+
+Wheras in **WishList** you'd have to use a template-value so it can update on the UI Thread without having to do a re-render:
+
+```jsx
+function TextMessageCell() {
+  const isSender = useTemplateValue<TextChatMessage>(message => message.isSender)
+
+  return (
+    <View style={styles.cell}>
+      <WishList.If value={isSender}>
+        <DeleteButton />
+      </WishList.If>
+
+      ...
+    </View>
+  )
+}
+```
+
+WishList also provides `<WishList.Switch>` and `<WishList.Case>` for inline switch/cases.
+
+### Loops
+
+As with conditionals, this also goes for loops - instead of a `{data.map((d) => ...)}`, you'd use `<WishList.ForEach>`.
+
+### Callbacks
+
+Since we are running on the UI Thread, we need to hop Threads for callbacks.
+
+In **FlatList**, an `onPress` callback might look like this:
+
+```jsx
+function ChatRoom() {
+  const onChatPressed = useCallback((item: ChatItem) => {
+    console.log(`Pressed message #${item.key}!`)
+  }, [])
+
+  const onChatPressedCallback = createRunInJsFn(onChatPressed)
+
+  return (
+    <FlatList renderItem={renderItem} {...listProps} />
+  )
+}
+
+function ChatCell({ onChatPressed }) {
+  return (
+    <Pressable onPress={onChatPressed}>
+      ...
+    </Pressable>
+  )
+}
+```
+
+For **WishList**, the above code can be roughly translated to this:
+
+```jsx
+function ChatRoom() {
+  const onChatPressed = useCallback((item: ChatItem) => {
+    console.log(`Pressed message #${item.key}!`)
+  }, [])
+
+  const onChatPressedCallback = createRunInJsFn(onChatPressed)
+
+  return (
+    <WishList.Component {...listProps}>
+      <WishList.Template type="text-message">
+        <ChatCell onChatPressed={onChatPressedCallback} />
+      </WishList.Template>
+    </WishList.Component>
+  )
+}
+
+function ChatCell({ onChatPressed }: ChatCellProps) {
+  return (
+    <WishList.Pressable onPress={onChatPressed}>
+      ...
+    </WishList.Pressable>
+  )
+}
+```
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT

package/android/CMakeLists.txt

@@ -0,0 +1,86 @@
+project(Wishlist)
+cmake_minimum_required(VERSION 3.13)
+
+set(CMAKE_VERBOSE_MAKEFILE ON)
+set(CMAKE_CXX_STANDARD 20)
+
+add_compile_options(
+  -Wall
+  -std=c++20
+  -Wno-deprecated-declarations
+  -Wno-deprecated-this-capture
+  -Wno-unused-parameter
+  -Wno-unused-variable
+  -Wno-unused-private-field
+  -Wno-unused-function
+  -Wno-unused-lambda-capture
+  -Wno-unused-but-set-variable
+)
+
+if(${CMAKE_BUILD_TYPE} STREQUAL "Debug")
+  string(APPEND CMAKE_CXX_FLAGS " -DDEBUG")
+endif()
+
+set(PACKAGE_NAME "react_codegen_wishlist")
+set(SRC_DIR "${CMAKE_CURRENT_SOURCE_DIR}/src")
+set(COMMON_SRC_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../cpp")
+set(LIB_ANDROID_GENERATED_JNI_DIR ${CMAKE_CURRENT_SOURCE_DIR}/build/generated/source/codegen/jni)
+
+file(GLOB_RECURSE SOURCES_COMMON CONFIGURE_DEPENDS "${COMMON_SRC_DIR}/**.cpp")
+file(GLOB_RECURSE SOURCES_ANDROID CONFIGURE_DEPENDS "${SRC_DIR}/main/jni/**.cpp")
+file(GLOB_RECURSE SOURCES_CODEGEN CONFIGURE_DEPENDS "${LIB_ANDROID_GENERATED_JNI_DIR}/**.cpp")
+
+# Consume shared libraries and headers from prefabs
+find_package(fbjni REQUIRED CONFIG)
+find_package(ReactAndroid REQUIRED CONFIG)
+find_package(react-native-worklets REQUIRED CONFIG)
+
+add_library(
+  ${PACKAGE_NAME}
+  SHARED
+  ${SOURCES_COMMON}
+  ${SOURCES_ANDROID}
+  ${SOURCES_CODEGEN}
+)
+
+target_compile_definitions(
+  ${PACKAGE_NAME}
+  PRIVATE
+  RN_SERIALIZABLE_STATE
+)
+
+# includes
+target_include_directories(
+  ${PACKAGE_NAME}
+  PUBLIC
+  "${SRC_DIR}/main/jni"
+  "${COMMON_SRC_DIR}/ContentContainer"
+  "${COMMON_SRC_DIR}/DataBinding"
+  "${COMMON_SRC_DIR}/DependencyInjection"
+  "${COMMON_SRC_DIR}/ItemProvider"
+  "${COMMON_SRC_DIR}/MGViewportCarer"
+  "${COMMON_SRC_DIR}/ReanimatedRuntime"
+  "${COMMON_SRC_DIR}/TemplateContainer"
+  "${COMMON_SRC_DIR}/UIScheduler"
+  "${COMMON_SRC_DIR}/Wishlist"
+  "${COMMON_SRC_DIR}"
+  "${LIB_ANDROID_GENERATED_JNI_DIR}"
+  "${REACT_ANDROID_DIR}/src/main/jni/react/turbomodule"
+)
+
+# build shared lib
+set_target_properties(${PACKAGE_NAME} PROPERTIES LINKER_LANGUAGE CXX)
+
+target_link_libraries(
+  ${PACKAGE_NAME}
+  log
+  android
+)
+
+target_link_libraries(
+  ${PACKAGE_NAME}
+  fbjni::fbjni
+  react-native-worklets::worklets
+  ReactAndroid::reactnative
+  ReactAndroid::jsi
+)

package/android/build.gradle

@@ -0,0 +1,72 @@
+buildscript {
+    def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["Wishlist_kotlinVersion"]
+
+    repositories {
+        mavenCentral()
+        google()
+    }
+
+    dependencies {
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
+        classpath("com.android.tools.build:gradle:8.7.2")
+    }
+}
+
+if (project == rootProject) {
+    return
+}
+
+def getExtOrDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["Wishlist_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+    return getExtOrDefault(name).toInteger()
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+apply plugin: "com.facebook.react"
+
+// This package only supports the New Architecture.
+// As of React Native 0.82+, the New Architecture is the default. We only fail
+// if it was explicitly disabled.
+if (project.hasProperty("newArchEnabled") && project.newArchEnabled == "false") {
+    throw new GradleException(
+        "@leonsilicon/react-native-wishlist requires the New Architecture. " +
+        "Remove newArchEnabled=false from your android/gradle.properties."
+    )
+}
+
+android {
+    namespace "com.wishlist"
+    compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+    ndkVersion getExtOrDefault("ndkVersion")
+
+    defaultConfig {
+        minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+        targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+
+    buildFeatures {
+        prefab true
+    }
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+
+dependencies {
+    implementation "com.facebook.react:react-android"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    implementation project(":react-native-worklets")
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+Wishlist_kotlinVersion=2.1.20
+Wishlist_minSdkVersion=24
+Wishlist_targetSdkVersion=36
+Wishlist_compileSdkVersion=36
+Wishlist_ndkVersion=27.1.12297006

package/android/spotless.gradle

@@ -0,0 +1,24 @@
+apply plugin: 'com.diffplug.spotless'
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+spotless {
+    java {
+        target 'src/**/*.java'
+        googleJavaFormat()
+    }
+    kotlin {
+        target 'src/**/*.kt'
+        ktfmt()
+    }
+    groovyGradle {
+        target '*.gradle'
+        greclipse()
+        indentWithSpaces(4)
+    }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.wishlist">
+
+</manifest>

package/android/src/main/java/com/wishlist/ContentContainer.kt

@@ -0,0 +1,22 @@
+package com.wishlist
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.viewmanagers.MGContentContainerManagerDelegate
+import com.facebook.react.viewmanagers.MGContentContainerManagerInterface
+import com.facebook.react.views.view.ReactViewGroup
+
+@ReactModule(name = ContentContainerViewManager.REACT_CLASS)
+class ContentContainerViewManager :
+    ViewGroupManager<ReactViewGroup>(), MGContentContainerManagerInterface<ReactViewGroup> {
+  companion object {
+    const val REACT_CLASS = "MGContentContainer"
+  }
+
+  override fun getName() = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext) = ReactViewGroup(reactContext)
+
+  override fun getDelegate() = MGContentContainerManagerDelegate(this)
+}

package/android/src/main/java/com/wishlist/Orchestrator.kt

@@ -0,0 +1,38 @@
+package com.wishlist
+
+import com.facebook.jni.HybridData
+import com.facebook.proguard.annotations.DoNotStrip
+import com.facebook.react.uimanager.PixelUtil
+
+class Orchestrator(private val mWishlist: Wishlist, wishlistId: String, viewportCarerRef: Int) {
+  companion object {
+    init {
+      WishlistSoLoader.staticInit()
+    }
+  }
+
+  @field:DoNotStrip private val mHybridData = initHybrid(wishlistId, viewportCarerRef)
+
+  private external fun initHybrid(wishlistId: String, viewportCarerRef: Int): HybridData
+
+  external fun renderAsync(
+      width: Float,
+      height: Float,
+      initialContentSize: Float,
+      originItem: Int,
+      templatesRef: Int,
+      names: List<String>,
+      inflatorId: String
+  )
+
+  external fun didScrollAsync(width: Float, height: Float, contentOffset: Float, inflatorId: String)
+
+  external fun scrollToItem(index: Int)
+
+  external fun didUpdateContentOffset()
+
+  @DoNotStrip
+  private fun scrollToOffset(offset: Float, animated: Boolean) {
+    mWishlist.reactSmoothScrollTo(0, PixelUtil.toPixelFromDIP(offset).toInt())
+  }
+}

package/android/src/main/java/com/wishlist/TemplateContainer.kt

@@ -0,0 +1,30 @@
+package com.wishlist
+
+import android.content.Context
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.views.view.ReactViewGroup
+
+private const val TEMPLATES_KEY = 1
+
+class TemplateContainer(reactContext: Context) : ReactViewGroup(reactContext) {
+  var inflatorId: String? = null
+  var wishlistId: String? = null
+  var names: List<String>? = null
+  var stateWrapper: StateWrapper? = null
+  var wishlist: Wishlist? = null
+    set(value) {
+      field = value
+      updateWishlist()
+    }
+
+  fun updateWishlist() {
+    wishlist?.let {
+      it.wishlistId = wishlistId
+      it.inflatorId = inflatorId
+      val templatesRef = stateWrapper?.stateDataMapBuffer?.getInt(TEMPLATES_KEY)
+      if (templatesRef != null) {
+        it.setTemplates(templatesRef, names ?: listOf())
+      }
+    }
+  }
+}

package/android/src/main/java/com/wishlist/TemplateContainerViewManager.kt

@@ -0,0 +1,65 @@
+package com.wishlist
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.MGTemplateContainerManagerDelegate
+import com.facebook.react.viewmanagers.MGTemplateContainerManagerInterface
+import org.json.JSONArray
+
+@ReactModule(name = TemplateContainerViewManager.REACT_CLASS)
+class TemplateContainerViewManager :
+    ViewGroupManager<TemplateContainer>(), MGTemplateContainerManagerInterface<TemplateContainer> {
+  companion object {
+    const val REACT_CLASS = "MGTemplateContainer"
+  }
+
+  override fun getName() = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext) =
+      TemplateContainer(reactContext)
+
+  override fun getDelegate() = MGTemplateContainerManagerDelegate(this)
+
+  override fun updateState(
+      view: TemplateContainer,
+      props: ReactStylesDiffMap?,
+      stateWrapper: StateWrapper?
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    view.updateWishlist()
+    return null
+  }
+
+  override fun onAfterUpdateTransaction(view: TemplateContainer) {
+    super.onAfterUpdateTransaction(view)
+    view.updateWishlist()
+  }
+
+  @ReactProp(name = "inflatorId")
+  override fun setInflatorId(view: TemplateContainer, value: String?) {
+    view.inflatorId = value
+  }
+
+  @ReactProp(name = "wishlistId")
+  override fun setWishlistId(view: TemplateContainer, value: String?) {
+    view.wishlistId = value
+  }
+
+  @ReactProp(name = "names")
+  override fun setNames(view: TemplateContainer, value: String?) {
+    if (value != null) {
+      val namesJson = JSONArray(value)
+      val names = ArrayList<String>(namesJson.length())
+      for (i in 0 until namesJson.length()) {
+        names.add(namesJson.getString(i))
+      }
+      view.names = names
+    } else {
+      view.names = null
+    }
+  }
+}