react-native-unistyles 1.2.0 → 1.3.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Jacek Pudysz
+Copyright (c) 2023-2024 Jacek Pudysz
 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

package/README.md

@@ -1,55 +1,47 @@
-[<img alt="react-native-unistyles" src="assets/banner.png">](https://codemask.com)
-
-
-<picture>
- <source media="(prefers-color-scheme: dark)" srcset="assets/uni-dark.svg">
- <img alt="react-native-unistyles" src="assets/uni-light.svg">
-</picture>
+[<img alt="react-native-unistyles" src="assets/banner.png">](https://reactnativeunistyles.vercel.app/)
 
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/jpudysz/react-native-unistyles?style=for-the-badge)
-[![npm downloads](https://img.shields.io/npm/dm/react-native-unistyles.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
-![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20IOS%20%7C%20SSR%20%7C%20Web-blue.svg?style=for-the-badge)
-[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
+[![npm downloads](https://img.shields.io/npm/dt/react-native-unistyles?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
+[![License: MIT](https://img.shields.io/badge/License-MIT-44CD11.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
+<br />
+[![platform - expo](https://img.shields.io/badge/Expo-fff?style=for-the-badge&logo=expo&logoColor=black)](https://docs.expo.dev/)
+[![platform - web](https://img.shields.io/badge/React_Native_Web-white?logo=react&logoColor=57BDDA&style=for-the-badge)](https://www.w3.org/)
+[![platform - ios](https://img.shields.io/badge/iOS-000?logo=apple&style=for-the-badge)](https://developer.apple.com/ios/)
+[![platform - macos](https://img.shields.io/badge/macOS-000?logo=apple&style=for-the-badge)](https://developer.apple.com/macos/)
+[![platform - ssr](https://img.shields.io/badge/SSR-black?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)
+[![platform - android](https://img.shields.io/badge/Android-44CD11?style=for-the-badge&logo=android&logoColor=white)](https://developer.android.com/)
+
+## [Documentation](https://reactnativeunistyles.vercel.app/)
+- [Start here](https://reactnativeunistyles.vercel.app/start/introduction/)
+- [API](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
+- [Show case](https://reactnativeunistyles.vercel.app/show-case/projects/)
+- [Examples](https://reactnativeunistyles.vercel.app/examples/all/)
 
 ## Features
-- ⚡ Blazing fast, adds around ~3ms on top of StyleSheet*
+- 🚀 Shared core with C++ and JSI bindings
+- 🌉 Supports new architecture
+- 🔥 Crazy performance, adds under 0.1 ms to your StyleSheet
 - 🎳 Share up to 100% of your styles across platforms in monorepo
-- 🎯 Doesn't introduce new components
-- 🖥️ Supports custom breakpoints and css-like media queries
-- 🎨 Access theme in your StyleSheets and components
-- 🪄 Supports dynamic functions to access values from JSX
-- 🥳 Compatible with Expo, Expo Go, Bare React Native, React Native Web and SSR
+- 🎯 Doesn't introduce new components, everything is packed in one hook
+- ⚛️ No React Context
+- 🖥️ Supports custom breakpoints, css-like media queries and variants
+- 🎨 Register multiple themes and change them with single function call
+- 🥳 Compatible with Expo, Bare React Native, React Native Web, React Native macOS and SSR
 - 🛡️ ~99% Test coverage
+- 🔌 Extend stylesheets with your own plugins
 - ⚔️ No 3rd party dependencies
-
-*-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
+- and much much more!
 
 ## Installation
 
-```cmd
+```shell
 yarn add react-native-unistyles
 ```
 
-## [Documentation](https://reactnativeunistyles.vercel.app/)
-- [Start here](https://reactnativeunistyles.vercel.app/start/setup/)
-- [References](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
-- [Examples](https://reactnativeunistyles.vercel.app/example/breakpoints/)
-
-## Faster, better and simpler - v.2.0 🚀
-
-There is ongoing work on branch [2.0](https://github.com/jpudysz/react-native-unistyles/tree/2.0).
-
----
-
-Join early testers and discussion [here](https://github.com/jpudysz/react-native-unistyles/discussions/41).
-
-```cmd
-yarn add react-native-unistyles@next
-```
-
-## Blog post
+## Discord
+Looking for help or you want to chat with me?
 
-Read about what drove me to create this library in this blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
+[Join Discord](https://discord.gg/akGHf27P4C)
 
 ## Sponsor my work
 

package/android/CMakeLists.txt

@@ -0,0 +1,27 @@
+cmake_minimum_required(VERSION 3.9.0)
+
+project(unistyles)
+
+add_library(unistyles
+    SHARED
+    ../cxx/UnistylesRuntime.cpp
+    ./src/main/cxx/cpp-adapter.cpp
+)
+
+include_directories(
+    ../cxx
+)
+
+set_target_properties(unistyles PROPERTIES
+    CXX_STANDARD 17
+    CXX_STANDARD_REQUIRED ON
+    CXX_EXTENSIONS OFF
+    POSITION_INDEPENDENT_CODE ON
+)
+
+find_package(ReactAndroid REQUIRED CONFIG)
+
+target_link_libraries(unistyles
+    ReactAndroid::jsi
+    android
+)

package/android/build.gradle

@@ -0,0 +1,75 @@
+buildscript {
+    ext.safeExtGet = {prop, fallback ->
+        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+    repositories {
+        google()
+        gradlePluginPortal()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.3.1")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.22")
+    }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'org.jetbrains.kotlin.android'
+
+def resolveBuildType() {
+    Gradle gradle = getGradle()
+    String tskReqStr = gradle.getStartParameter().getTaskRequests()['args'].toString()
+
+    return tskReqStr.contains('Release') ? 'release' : 'debug'
+}
+
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+if (isNewArchitectureEnabled()) {
+    apply plugin: 'com.facebook.react'
+}
+
+android {
+    compileSdkVersion safeExtGet('compileSdkVersion', 33)
+    namespace "com.unistyles"
+
+    defaultConfig {
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+        minSdkVersion safeExtGet('minSdkVersion', 21)
+        externalNativeBuild {
+            cmake {
+                arguments "-DANDROID_STL=c++_shared"
+            }
+        }
+    }
+
+    buildFeatures {
+        prefab true
+    }
+
+    externalNativeBuild {
+        cmake {
+            path "CMakeLists.txt"
+        }
+    }
+
+    packagingOptions {
+        doNotStrip resolveBuildType() == 'debug' ? "**/**/*.so" : ''
+        excludes = [
+            "META-INF",
+            "META-INF/**",
+            "**/libjsi.so",
+            "**/libc++_shared.so"
+        ]
+    }
+}
+
+repositories {
+    mavenCentral()
+    google()
+}
+
+dependencies {
+    implementation 'com.facebook.react:react-native'
+}

package/android/src/main/cxx/cpp-adapter.cpp

@@ -0,0 +1,132 @@
+#include <jni.h>
+#include <jsi/jsi.h>
+#include "UnistylesRuntime.h"
+
+using namespace facebook;
+
+static jobject unistylesModule = nullptr;
+std::shared_ptr<UnistylesRuntime> unistylesRuntime = nullptr;
+
+void throwKotlinException(
+    JNIEnv *env,
+    const char *message
+) {
+    jclass runtimeExceptionClass = env->FindClass("java/lang/RuntimeException");
+
+    if (runtimeExceptionClass != nullptr) {
+        env->ThrowNew(runtimeExceptionClass, message);
+        env->DeleteLocalRef(runtimeExceptionClass);
+    }
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_unistyles_UnistylesModule_nativeInstall(
+        JNIEnv *env,
+        jobject thiz,
+        jlong jsi,
+        jint screenWidth,
+        jint screenHeight,
+        jstring colorScheme,
+        jstring contentSizeCategory
+) {
+    auto runtime = reinterpret_cast<facebook::jsi::Runtime *>(jsi);
+
+    if (unistylesModule == nullptr) {
+        unistylesModule = env->NewGlobalRef(thiz);
+    }
+
+    if (runtime == nullptr || unistylesModule == nullptr) {
+        return throwKotlinException(env, "Something went wrong while initializing UnistylesModule");
+    }
+
+    const char *colorSchemeChars = env->GetStringUTFChars(colorScheme, nullptr);
+    std::string colorSchemeStr(colorSchemeChars);
+    env->ReleaseStringUTFChars(colorScheme, colorSchemeChars);
+
+    const char *contentSizeCategoryChars = env->GetStringUTFChars(contentSizeCategory, nullptr);
+    std::string contentSizeCategoryStr(contentSizeCategoryChars);
+    env->ReleaseStringUTFChars(contentSizeCategory, contentSizeCategoryChars);
+
+    unistylesRuntime = std::make_shared<UnistylesRuntime>(
+        screenWidth,
+        screenHeight,
+        colorSchemeStr,
+        contentSizeCategoryStr
+    );
+
+    unistylesRuntime->onThemeChange([=](const std::string &theme) {
+        jstring themeStr = env->NewStringUTF(theme.c_str());
+        jclass cls = env->GetObjectClass(unistylesModule);
+        jmethodID methodId = env->GetMethodID(cls, "onThemeChange", "(Ljava/lang/String;)V");
+
+        env->CallVoidMethod(unistylesModule, methodId, themeStr);
+        env->DeleteLocalRef(themeStr);
+        env->DeleteLocalRef(cls);
+    });
+
+    unistylesRuntime->onLayoutChange([=](const std::string &breakpoint, const std::string &orientation, int width, int height) {
+        jstring breakpointStr = env->NewStringUTF(breakpoint.c_str());
+        jstring orientationStr = env->NewStringUTF(orientation.c_str());
+        jclass cls = env->GetObjectClass(unistylesModule);
+        jmethodID methodId = env->GetMethodID(cls, "onLayoutChange", "(Ljava/lang/String;Ljava/lang/String;II)V");
+
+        env->CallVoidMethod(unistylesModule, methodId, breakpointStr, orientationStr, width, height);
+        env->DeleteLocalRef(breakpointStr);
+        env->DeleteLocalRef(orientationStr);
+        env->DeleteLocalRef(cls);
+    });
+
+    unistylesRuntime->onPluginChange([=]() {
+        jclass cls = env->GetObjectClass(unistylesModule);
+        jmethodID methodId = env->GetMethodID(cls, "onPluginChange", "()V");
+
+        env->CallVoidMethod(unistylesModule, methodId);
+        env->DeleteLocalRef(cls);
+    });
+
+    unistylesRuntime->onContentSizeCategoryChange([=](const std::string &contentSizeCategory) {
+        jstring contentSizeCategoryStr = env->NewStringUTF(contentSizeCategory.c_str());
+        jclass cls = env->GetObjectClass(unistylesModule);
+        jmethodID methodId = env->GetMethodID(cls, "onContentSizeCategoryChange", "(Ljava/lang/String;)V");
+
+        env->CallVoidMethod(unistylesModule, methodId, contentSizeCategoryStr);
+        env->DeleteLocalRef(contentSizeCategoryStr);
+        env->DeleteLocalRef(cls);
+    });
+
+    jsi::Object hostObject = jsi::Object::createFromHostObject(*runtime, unistylesRuntime);
+
+    runtime->global().setProperty(*runtime, "__UNISTYLES__", std::move(hostObject));
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_unistyles_UnistylesModule_nativeDestroy(JNIEnv *env, jobject thiz) {
+    unistylesRuntime.reset();
+    unistylesModule = nullptr;
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_unistyles_UnistylesModule_nativeOnOrientationChange(JNIEnv *env, jobject thiz, jint width, jint height) {
+    if (unistylesRuntime != nullptr) {
+        unistylesRuntime->handleScreenSizeChange(width, height);
+    }
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_unistyles_UnistylesModule_nativeOnAppearanceChange(JNIEnv *env, jobject thiz, jstring colorScheme) {
+    if (unistylesRuntime != nullptr) {
+        unistylesRuntime->handleAppearanceChange(env->GetStringUTFChars(colorScheme, nullptr));
+    }
+}
+
+extern "C"
+JNIEXPORT void JNICALL
+Java_com_unistyles_UnistylesModule_nativeOnContentSizeCategoryChange(JNIEnv *env, jobject thiz, jstring contentSizeCategory) {
+    if (unistylesRuntime != nullptr) {
+        unistylesRuntime->handleContentSizeCategoryChange(env->GetStringUTFChars(contentSizeCategory, nullptr));
+    }
+}

package/android/src/main/java/com/unistyles/UnistylesModule.kt

@@ -0,0 +1,189 @@
+package com.unistyles
+
+import android.content.BroadcastReceiver
+import android.content.Context
+import android.content.Intent
+import android.content.IntentFilter
+import android.content.res.Configuration
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.modules.core.DeviceEventManagerModule
+
+
+class UnistylesModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext), LifecycleEventListener {
+    private val configurationChangeReceiver = object : BroadcastReceiver() {
+        override fun onReceive(context: Context, intent: Intent) {
+            if (intent.action == Intent.ACTION_CONFIGURATION_CHANGED) {
+                Handler(Looper.getMainLooper()).postDelayed({
+                    this@UnistylesModule.onConfigChange()
+                }, 10)
+            }
+        }
+    }
+
+    override fun getName() = NAME
+    companion object {
+        const val NAME = "Unistyles"
+    }
+
+    //region Lifecycle
+    init {
+        reactApplicationContext.registerReceiver(configurationChangeReceiver, IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED))
+    }
+
+    override fun onCatalystInstanceDestroy() {
+        reactApplicationContext.unregisterReceiver(configurationChangeReceiver)
+        this.nativeDestroy()
+    }
+
+    //endregion
+    //region Event handlers
+    private fun onConfigChange() {
+        val config = this.getConfig()
+
+        reactApplicationContext.runOnJSQueueThread {
+            this.nativeOnOrientationChange(
+                config["width"] as Int,
+                config["height"] as Int
+            )
+            this.nativeOnAppearanceChange(
+                config["colorScheme"] as String
+            )
+            this.nativeOnContentSizeCategoryChange(config["contentSizeCategory"] as String)
+        }
+    }
+
+    private fun getConfig(): Map<String, Any> {
+        val displayMetrics = reactApplicationContext.resources.displayMetrics
+        val colorScheme = when (reactApplicationContext.resources.configuration.uiMode.and(Configuration.UI_MODE_NIGHT_MASK)) {
+            Configuration.UI_MODE_NIGHT_YES -> "dark"
+            Configuration.UI_MODE_NIGHT_NO -> "light"
+            else -> "unspecified"
+        }
+        val fontScale = reactApplicationContext.resources.configuration.fontScale
+        val contentSizeCategory = when {
+            fontScale <= 0.85f -> "Small"
+            fontScale <= 1.0f -> "Default"
+            fontScale <= 1.15f -> "Large"
+            fontScale <= 1.3f -> "ExtraLarge"
+            else -> "Huge"
+        }
+
+        return mapOf(
+            "width" to (displayMetrics.widthPixels / displayMetrics.density).toInt(),
+            "height" to (displayMetrics.heightPixels / displayMetrics.density).toInt(),
+            "colorScheme" to colorScheme,
+            "contentSizeCategory" to contentSizeCategory
+        )
+    }
+
+    //endregion
+    //region Core
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    fun install(): Boolean {
+        return try {
+            System.loadLibrary("unistyles")
+            val config = this.getConfig()
+
+            this.reactApplicationContext.javaScriptContextHolder?.let {
+                this.nativeInstall(
+                    it.get(),
+                    config["width"] as Int,
+                    config["height"] as Int,
+                    config["colorScheme"] as String,
+                    config["contentSizeCategory"] as String
+                )
+
+                Log.i(NAME, "Installed Unistyles \uD83E\uDD84!")
+
+                return true
+            }
+
+            false
+        } catch (e: Exception) {
+            false
+        }
+    }
+
+    private external fun nativeInstall(jsi: Long, width: Int, height: Int, colorScheme: String, contentSizeCategory: String)
+    private external fun nativeDestroy()
+    private external fun nativeOnOrientationChange(width: Int, height: Int)
+    private external fun nativeOnAppearanceChange(colorScheme: String)
+    private external fun nativeOnContentSizeCategoryChange(contentSizeCategory: String)
+
+    //endregion
+    //region Event emitter
+    private fun onLayoutChange(breakpoint: String, orientation: String, width: Int, height: Int) {
+        val body = Arguments.createMap().apply {
+            putString("type", "layout")
+            putMap("payload", Arguments.createMap().apply {
+                putString("breakpoint", breakpoint)
+                putString("orientation", orientation)
+                putMap("screen", Arguments.createMap().apply {
+                    putInt("width", width)
+                    putInt("height", height)
+                })
+            })
+        }
+
+        reactApplicationContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit("__unistylesOnChange", body)
+    }
+
+    private fun onThemeChange(themeName: String) {
+        val body = Arguments.createMap().apply {
+            putString("type", "theme")
+            putMap("payload", Arguments.createMap().apply {
+                putString("themeName", themeName)
+            })
+        }
+
+        reactApplicationContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit("__unistylesOnChange", body)
+    }
+
+    private fun onPluginChange() {
+        val body = Arguments.createMap().apply {
+            putString("type", "plugin")
+        }
+
+        reactApplicationContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit("__unistylesOnChange", body)
+    }
+
+    private fun onContentSizeCategoryChange(contentSizeCategory: String) {
+        val body = Arguments.createMap().apply {
+            putString("type", "dynamicTypeSize")
+            putMap("payload", Arguments.createMap().apply {
+                putString("contentSizeCategory", contentSizeCategory)
+            })
+        }
+
+        reactApplicationContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit("__unistylesOnChange", body)
+    }
+
+    @ReactMethod
+    fun addListener(eventName: String?) = Unit
+
+    @ReactMethod
+    fun removeListeners(count: Double) = Unit
+    override fun onHostResume() {
+        this.onConfigChange()
+    }
+
+    override fun onHostPause() {}
+
+    override fun onHostDestroy() {}
+    //endregion
+}

package/android/src/main/java/com/unistyles/UnistylesPackage.kt

@@ -0,0 +1,18 @@
+package com.unistyles
+
+import android.view.View
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ReactShadowNode
+import com.facebook.react.uimanager.ViewManager
+
+class UnistylesPackage: ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
+        return mutableListOf(UnistylesModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> {
+        return mutableListOf()
+    }
+}