From 8909b8be5728da0781342a580474f7c8bcfd5da5 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Tue, 22 Nov 2022 16:01:37 +0900
Subject: [PATCH] Add a splitRender util

---
 examples/expo-example/src/common.tsx          | 23 +++++++++-------
 examples/expo-example/src/components/div.tsx  | 19 +++++++++++++
 .../src/components/{ => text}/text.d.ts       |  0
 .../src/components/{ => text}/text.native.tsx |  0
 .../src/components/{ => text}/text.web.tsx    |  0
 packages/yoshiki/src/index.ts                 | 20 ++++++++++++--
 packages/yoshiki/src/native/index.ts          |  2 ++
 packages/yoshiki/src/native/split-render.tsx  | 27 +++++++++++++++++++
 packages/yoshiki/src/web/index.tsx            |  1 +
 packages/yoshiki/src/web/split-render.tsx     | 27 +++++++++++++++++++
 10 files changed, 107 insertions(+), 12 deletions(-)
 create mode 100644 examples/expo-example/src/components/div.tsx
 rename examples/expo-example/src/components/{ => text}/text.d.ts (100%)
 rename examples/expo-example/src/components/{ => text}/text.native.tsx (100%)
 rename examples/expo-example/src/components/{ => text}/text.web.tsx (100%)
 create mode 100644 packages/yoshiki/src/native/split-render.tsx
 create mode 100644 packages/yoshiki/src/web/split-render.tsx

diff --git a/examples/expo-example/src/common.tsx b/examples/expo-example/src/common.tsx
index 6c00755..750305e 100644
--- a/examples/expo-example/src/common.tsx
+++ b/examples/expo-example/src/common.tsx
@@ -4,20 +4,23 @@
 //
 
 import { px, useYoshiki } from "yoshiki";
-import { P } from "./components/text";
+import { P } from "./components/text/text";
+import { Div } from "./components/div";
 
 export const Card = () => {
 	const { css } = useYoshiki();
 
 	return (
-		<P
-			{...css({
-				backgroundColor: "black",
-				p: px(12),
-				/* color: "white", */
-			})}
-		>
-			Test
-		</P>
+		<Div {...css({ backgroundColor: { xs: "green", md: "blue" } })}>
+			<P
+				{...css({
+					backgroundColor: "black",
+					m: px(12),
+					color: "white",
+				})}
+			>
+				Test
+			</P>
+		</Div>
 	);
 };
diff --git a/examples/expo-example/src/components/div.tsx b/examples/expo-example/src/components/div.tsx
new file mode 100644
index 0000000..19e965a
--- /dev/null
+++ b/examples/expo-example/src/components/div.tsx
@@ -0,0 +1,19 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { splitRender } from "yoshiki";
+import { View } from "react-native";
+import { ReactNode } from "react";
+
+export const Div = splitRender<HTMLDivElement, View, { children: ReactNode }>(
+	function _DivWeb(props, ref) {
+		console.log(props);
+		return <div ref={ref} {...props}></div>;
+	},
+	function _DivNat(props, ref) {
+		console.log(props)
+		return <View ref={ref} {...props}></View>;
+	},
+);
diff --git a/examples/expo-example/src/components/text.d.ts b/examples/expo-example/src/components/text/text.d.ts
similarity index 100%
rename from examples/expo-example/src/components/text.d.ts
rename to examples/expo-example/src/components/text/text.d.ts
diff --git a/examples/expo-example/src/components/text.native.tsx b/examples/expo-example/src/components/text/text.native.tsx
similarity index 100%
rename from examples/expo-example/src/components/text.native.tsx
rename to examples/expo-example/src/components/text/text.native.tsx
diff --git a/examples/expo-example/src/components/text.web.tsx b/examples/expo-example/src/components/text/text.web.tsx
similarity index 100%
rename from examples/expo-example/src/components/text.web.tsx
rename to examples/expo-example/src/components/text/text.web.tsx
diff --git a/packages/yoshiki/src/index.ts b/packages/yoshiki/src/index.ts
index c6ab52c..a9bc70e 100644
--- a/packages/yoshiki/src/index.ts
+++ b/packages/yoshiki/src/index.ts
@@ -5,11 +5,14 @@
 
 import {
 	useYoshiki as useWebYoshiki,
+	splitRender as webSplitRender,
 	Platform,
 	type Stylable as WebStylable,
 	type StylableHoverable as WebStylableHoverable,
 	type YsWeb,
 } from "./web";
+import * as Web from "./web/units";
+
 import type {
 	Stylable as NativeStylable,
 	StylableHoverable as NativeStylableHoverable,
@@ -19,11 +22,12 @@ import type {
 import type { YsStyleProps } from "./native/generator";
 import type { Theme } from "./theme";
 import type { WithState, EnhancedStyle, Length } from "./type";
+import { ExoticComponent, ReactElement, Ref } from "react";
 import type { ViewStyle, ImageStyle, TextStyle } from "react-native";
 
 export const useYoshiki = (): {
 	css: <
-		Style extends ViewStyle | TextStyle | ImageStyle,
+		Style extends ViewStyle & TextStyle & ImageStyle,
 		State extends Partial<WithState<EnhancedStyle<Style>>> | Record<string, never>,
 	>(
 		css: EnhancedStyle<Style> & State,
@@ -45,7 +49,6 @@ export type StylableHoverable<Type extends "image" | "text" | "other" = "other">
 	| NativeStylableHoverable<Type>;
 export type { YsWeb, YsNative };
 
-import * as Web from "./web/units";
 export const px = (value: number): Length => Web.px(value) as unknown as Length;
 export const percent = (value: number): Length => Web.percent(value) as unknown as Length;
 export const em = (value: number): Length => Web.em(value) as unknown as Length;
@@ -53,3 +56,16 @@ export const rem = (value: number): Length => Web.rem(value) as unknown as Lengt
 
 export { Platform };
 export { breakpoints, type Theme, ThemeProvider, useTheme } from "./theme";
+
+export const splitRender = <
+	WebElement,
+	NativeElement,
+	Props,
+	StyleType extends "text" | "image" | "other" = "other",
+>(
+	web: (props: Props & WebStylable, ref: Ref<WebElement>) => ReactElement,
+	native: (props: Props & NativeStylable<StyleType>, ref: Ref<NativeElement>) => ReactElement,
+): ExoticComponent<Props & Stylable> => {
+	// By default we return the web version. Same reason as why we return the web useYoshiki.
+	return webSplitRender<WebElement, NativeElement, Props, StyleType>(web, native);
+};
diff --git a/packages/yoshiki/src/native/index.ts b/packages/yoshiki/src/native/index.ts
index e8d1588..af994c6 100644
--- a/packages/yoshiki/src/native/index.ts
+++ b/packages/yoshiki/src/native/index.ts
@@ -16,3 +16,5 @@ export { Pressable } from "./hover";
 
 export * from "./units";
 
+export { splitRender } from "./split-render";
+
diff --git a/packages/yoshiki/src/native/split-render.tsx b/packages/yoshiki/src/native/split-render.tsx
new file mode 100644
index 0000000..631aa3d
--- /dev/null
+++ b/packages/yoshiki/src/native/split-render.tsx
@@ -0,0 +1,27 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { Ref, ReactElement, ExoticComponent, forwardRef } from "react";
+import type { Stylable } from "../";
+import type { Stylable as WebStylable } from "./index";
+import type { Stylable as NativeStylable } from "../native";
+
+/**
+ * @warning You should not import this function directly since it will always
+ * return the native version. You may want to import the splitRender from
+ * "yoshiki" directly instead of fron "yoshiki/native".
+ */
+export const splitRender = <
+	WebElement,
+	NativeElement,
+	Props,
+	StyleType extends "text" | "image" | "other" = "other",
+>(
+	web: (props: Props & WebStylable, ref: Ref<WebElement>) => ReactElement,
+	native: (props: Props & NativeStylable<StyleType>, ref: Ref<NativeElement>) => ReactElement,
+): ExoticComponent<Props & Stylable> => {
+	// @ts-ignore Ignore the Web Stylable that are not assignable. (When web style props are given, the web splitRender function will be called.)
+	return forwardRef<NativeElement, Props & NativeStylable>(native);
+};
diff --git a/packages/yoshiki/src/web/index.tsx b/packages/yoshiki/src/web/index.tsx
index 6a2a247..9124581 100644
--- a/packages/yoshiki/src/web/index.tsx
+++ b/packages/yoshiki/src/web/index.tsx
@@ -24,3 +24,4 @@ export { StyleRegistryProvider, useStyleRegistry, createStyleRegistry } from "./
 export { Pressable, useMobileHover } from "./hover";
 export * from "./units";
 export { type Theme, breakpoints, useTheme, ThemeProvider } from "../theme";
+export { splitRender } from "./split-render";
diff --git a/packages/yoshiki/src/web/split-render.tsx b/packages/yoshiki/src/web/split-render.tsx
new file mode 100644
index 0000000..fce2c2e
--- /dev/null
+++ b/packages/yoshiki/src/web/split-render.tsx
@@ -0,0 +1,27 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { Ref, ReactElement, ExoticComponent, forwardRef } from "react";
+import type { Stylable } from "../";
+import type { Stylable as WebStylable } from "./index";
+import type { Stylable as NativeStylable } from "../native";
+
+/**
+ * @warning You should not import this function directly since it will always
+ * return the web version. You may want to import the splitRender from
+ * "yoshiki" directly instead of fron "yoshiki/web".
+ */
+export const splitRender = <
+	WebElement,
+	NativeElement,
+	Props,
+	StyleType extends "text" | "image" | "other" = "other",
+>(
+	web: (props: Props & WebStylable, ref: Ref<WebElement>) => ReactElement,
+	native: (props: Props & NativeStylable<StyleType>, ref: Ref<NativeElement>) => ReactElement,
+): ExoticComponent<Props & Stylable> => {
+	// @ts-ignore Ignore the Web Stylable that are not assignable. (When native style props are given, the native splitRender function will be called.)
+	return forwardRef<WebElement, Props & WebStylable>(web);
+};