@granite-js/image 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @granite-js/image
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [e1384cf]
+  - @granite-js/native@0.1.2
+
 ## 0.1.1
 
 ### Patch Changes

package/NOTICE

@@ -45,7 +45,13 @@ Third-Party Libraries:
    - License Text: https://opensource.org/licenses/MIT
    - Repository: git+https://github.com/facebook/react-native.git
 	
-5. **typescript**
+5. **react-simplikit**
+	
+   - License: MIT
+   - License Text: https://opensource.org/licenses/MIT
+   - Repository: git+https://github.com/toss/react-simplikit.git
+	
+6. **typescript**
 	
    - License: Apache-2.0
    - License Text: https://www.apache.org/licenses/LICENSE-2.0

package/dist/Image.d.ts

@@ -0,0 +1,66 @@
+import { FastImageProps, Source as FastImageSource } from '@granite-js/native/react-native-fast-image';
+type Source = {
+    uri?: string;
+    cache?: FastImageSource['cache'];
+};
+export interface ImageProps extends Omit<FastImageProps, 'source'> {
+    source?: Source;
+}
+/**
+ * @public
+ * @category UI
+ * @name Image
+ * @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+ * @link https://github.com/DylanVann/react-native-fast-image/tree/v8.6.3/README.md
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+ * @param {object} [props.source] - An object containing information about the image resource to load.
+ * @param {string} [props.source.uri] - The URI address representing the image resource to load.
+ * @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+ * @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+ * @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+ * @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+ *
+ * @example
+ * ### Example: Loading and rendering an image
+ *
+ * The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+ *
+ * ```tsx
+ * import { Image } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * export function ImageExample() {
+ *   return (
+ *     <View>
+ *       <Image
+ *         source={{ uri: 'my-image-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *
+ *       <Image
+ *         source={{ uri: 'my-svg-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare function Image(props: ImageProps): import("react/jsx-runtime").JSX.Element;
+export { Image };

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './SvgImage';
+export { Image, type ImageProps } from './Image';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/image",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
     "prepack": "yarn build",
     "typecheck": "tsc --noEmit",
@@ -17,7 +17,7 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@granite-js/native": "0.1.1",
+    "@granite-js/native": "0.1.2",
     "@types/react": "18.3.3",
     "eslint": "^9.7.0",
     "react": "18.2.0",
@@ -29,5 +29,8 @@
     "@types/react": "*",
     "react": "*",
     "react-native": "*"
+  },
+  "dependencies": {
+    "react-simplikit": "^0.0.40"
   }
 }

package/src/Image.tsx

@@ -0,0 +1,93 @@
+import FastImage, { FastImageProps, Source as FastImageSource } from '@granite-js/native/react-native-fast-image';
+import { StyleSheet } from 'react-native';
+import { SvgImage } from './SvgImage';
+
+type Source = {
+  uri?: string;
+  cache?: FastImageSource['cache'];
+};
+
+export interface ImageProps extends Omit<FastImageProps, 'source'> {
+  source?: Source;
+}
+
+/**
+ * @public
+ * @category UI
+ * @name Image
+ * @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+ * @link https://github.com/DylanVann/react-native-fast-image/tree/v8.6.3/README.md
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+ * @param {object} [props.source] - An object containing information about the image resource to load.
+ * @param {string} [props.source.uri] - The URI address representing the image resource to load.
+ * @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+ * @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+ * @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+ * @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+ *
+ * @example
+ * ### Example: Loading and rendering an image
+ *
+ * The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+ *
+ * ```tsx
+ * import { Image } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * export function ImageExample() {
+ *   return (
+ *     <View>
+ *       <Image
+ *         source={{ uri: 'my-image-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *
+ *       <Image
+ *         source={{ uri: 'my-svg-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+function Image(props: ImageProps) {
+  if (typeof props.source === 'object' && props.source.uri?.endsWith('.svg')) {
+    const style = StyleSheet.flatten(props.style);
+    const width = style?.width;
+    const height = style?.height;
+
+    return (
+      <SvgImage
+        testID={props.testID}
+        url={props.source.uri!}
+        width={width}
+        height={height}
+        style={props.style}
+        onLoadStart={props.onLoadStart}
+        onLoadEnd={props.onLoadEnd}
+        onError={props.onError}
+      />
+    );
+  }
+
+  return <FastImage {...props} />;
+}
+
+export { Image };

package/src/SvgImage.tsx

@@ -1,7 +1,7 @@
 import { SvgUri, SvgXml } from '@granite-js/native/react-native-svg';
 import { createElement, useEffect, useCallback, useState } from 'react';
 import { View, type ViewStyle, type StyleProp } from 'react-native';
-import { usePreservedCallback } from './hooks/usePreservedCallback';
+import { usePreservedCallback } from 'react-simplikit';
 import type { DimensionValue, NumberValue } from './types';
 
 export interface SvgImageProps {

package/src/index.ts

@@ -1 +1 @@
-export * from './SvgImage';
+export { Image, type ImageProps } from './Image';

package/dist/hooks/usePreservedCallback.d.ts

@@ -1 +0,0 @@
-export declare function usePreservedCallback<Callback extends (...args: any[]) => any>(callback: Callback): Callback;

package/src/hooks/usePreservedCallback.ts

@@ -1,16 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export function usePreservedCallback<Callback extends (...args: any[]) => any>(callback: Callback) {
-  const callbackRef = useRef<Callback>(callback);
-
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
-
-  return useCallback(
-    (...args: any[]) => {
-      return callbackRef.current(...args);
-    },
-    [callbackRef]
-  ) as Callback;
-}