Tooling: bundle and publish

.gitignore

@@ -1,3 +1,3 @@
 .vscode/
-node_modules
-build
+node_modules/
+dist/

.prettierrc

@@ -1,5 +1,5 @@
 {
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "all",
+  "trailingComma": "all"
 }

.yarnrc

@@ -0,0 +1 @@
+--add.exact true

README.md

@@ -115,18 +115,21 @@ export default function UpgradeCTACarousel() {
 ```
 
 ```jsx
+import { FromJSON } from '@8fit/carousel-animation';
+
 const assets = {
   '8.png': require('./assets/8.png'),
 };
-export default () => Parse(require('./animation.json'), assets);
+
+export default () => FromJSON(require('./animation.json'), assets);
 ```
 
 ## Grouping
 
 You can use `Group` to separate your animation into multiple components
 
 ```jsx
-import { Item, Group } from 'eightfit.carousel.animation';
+import { Item, Group } from '@8fit/carousel-animation';
 
 function Page1(props: any) {
   return (

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { modules: false }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+};

package.json

@@ -1,29 +1,36 @@
 {
   "name": "@8fit/carousel-animation",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Create carousel animation using configuration files",
   "author": "drmas",
   "license": "MIT",
   "repository": "8fit/carousel-animation",
-  "main": "build/index.js",
-  "types": "./build/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.module.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsc",
-    "postinstall": "npm run build"
-  },
-  "dependencies": {
-    "@types/react": "16.8.3",
-    "@types/react-native": "0.57.65"
+    "build:js": "rollup --config",
+    "build:declaration": "tsc -d --listEmittedFiles --project ./tsconfig.json --noEmit false --emitDeclarationOnly true --outDir ./dist",
+    "build": "yarn build:js && yarn build:declaration",
+    "prebuild": "rm -rf ./dist"
   },
   "peerDependencies": {
-    "react": "16.8.*",
-    "react-native": "0.59.*",
-    "typescript": "3.5.*"
+    "react": ">=16.8.0",
+    "react-native": ">=0.59.0"
   },
   "devDependencies": {
-    "react": "16.8.*",
-    "react-native": "0.59.*",
-    "typescript": "3.5.*"
+    "@babel/core": "7.6.2",
+    "@babel/preset-env": "7.6.2",
+    "@babel/preset-react": "7.0.0",
+    "@babel/preset-typescript": "7.6.0",
+    "@types/react": "16.8.3",
+    "@types/react-native": "0.57.65",
+    "react": "16.8.3",
+    "react-native": "0.59.9",
+    "rollup": "1.23.0",
+    "rollup-plugin-babel": "4.3.3",
+    "rollup-plugin-node-resolve": "5.2.0",
+    "typescript": "3.6.3"
   },
   "files": [
     "dist"

rollup.config.js

@@ -0,0 +1,17 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+export default {
+  input: './src/index.ts',
+  output: [
+    { file: './dist/index.js', format: 'cjs' },
+    { file: './dist/index.module.js', format: 'es' },
+  ],
+  plugins: [
+    resolve({ extensions }),
+    babel({ extensions, include: ['src/**/*'], exclude: 'node_modules/**' }),
+  ],
+  external: ['react', 'react-native'],
+};

src/example.tsx

@@ -1,11 +1,11 @@
 import React, { FunctionComponent } from 'react';
 import { Dimensions } from 'react-native';
 
-import { Slider, Group, Item } from './index';
+import { Slider, Group, Item, GroupProps } from './index';
 
 const { width: screenWidth, height: screenHeight } = Dimensions.get('screen');
 
-const Page1: FunctionComponent<any> = props => (
+const Page1: FunctionComponent<GroupProps> = props => (
   <Group {...props}>
     <Item
       center={true}

src/from-json.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Image, View, ViewProps, ImageProps, ImageSourcePropType } from 'react-native';
+
+import Item, { ItemProps } from './item';
+import Group, { GroupProps } from './group';
+import Slider, { SliderProps } from './slider';
+
+type ChildJSON =
+  | {
+      type: 'Item';
+      properties: Omit<ItemProps, 'children'> & { key: string };
+      children: ChildJSON[];
+    }
+  | {
+      type: 'Group';
+      properties: Omit<GroupProps, 'children'> & { key: string };
+      children: ChildJSON[];
+    }
+  | {
+      type: 'View';
+      properties: Omit<ViewProps, 'children'> & { key: string };
+      children: ChildJSON[];
+    }
+  | {
+      type: 'Image';
+      properties: Omit<ImageProps, 'source'> & { key: string; source: { require: string } };
+    };
+
+export interface SliderJSON {
+  properties: Omit<SliderProps, 'children'>;
+  children: ChildJSON[];
+}
+
+export interface AssetLibrary {
+  [key: string]: ImageSourcePropType;
+}
+
+const mapChild = (assets: AssetLibrary) => (item: ChildJSON, index: number) =>
+  createComponent(
+    { ...item, properties: { ...item.properties, key: `ITEM__${index}` } } as ChildJSON,
+    assets,
+  );
+
+function createComponent(json: ChildJSON, assets: AssetLibrary) {
+  const withAssets = mapChild(assets);
+
+  switch (json.type) {
+    case 'Group':
+      return <Group {...json.properties}>{json.children.map(withAssets)}</Group>;
+    case 'Item':
+      return <Item {...json.properties}>{json.children.map(withAssets)}</Item>;
+    case 'View':
+      return <View {...json.properties}>{json.children.map(withAssets)}</View>;
+    case 'Image': {
+      const { source, ...imageProps } = json.properties;
+
+      return <Image {...imageProps} source={assets[source.require]} />;
+    }
+    default:
+      return null;
+  }
+}
+
+const FromJSON = ({ properties, children }: SliderJSON, assets: AssetLibrary) => (
+  <Slider {...properties}>{children.map(mapChild(assets))}</Slider>
+);
+
+export default FromJSON;

src/group.tsx

@@ -1,20 +1,24 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, isValidElement, cloneElement, Children } from 'react';
 import { View } from 'react-native';
 
 import { ItemProps } from './item';
 
-const Group: FunctionComponent<ItemProps> = ({ children, ...groupProps }) => {
-  const childrenWithProps = React.Children.map(children, (child: any, index) =>
-    React.cloneElement(child, {
+export interface GroupProps extends ItemProps {}
+
+const Group: FunctionComponent<GroupProps> = ({ children, ...groupProps }) => {
+  const childrenWithProps = Children.map(children, (child, index) => {
+    if (!isValidElement<ItemProps>(child)) return child;
+
+    return cloneElement(child, {
       animatedScroll: groupProps.animatedScroll,
       totalFrames: groupProps.totalFrames,
       slideWidth: groupProps.slideWidth,
       slideHeight: groupProps.slideHeight,
       skipFrames: groupProps.skipFrames,
       pages: groupProps.pages,
       key: `KEY_${index}`,
-    }),
-  );
+    });
+  });
 
   return <View {...groupProps}>{childrenWithProps}</View>;
 };

src/index.ts

@@ -0,0 +1,15 @@
+// Import and re-export since Rollup complains when attempting
+// `export { default as Module, Type } from './module';`.
+
+import Slider, { SliderProps } from './slider';
+import Group, { GroupProps } from './group';
+import Item, { KeyFrame, ItemProps } from './item';
+import FromJSON, { SliderJSON, AssetLibrary } from './from-json';
+
+export type KeyFrame = KeyFrame;
+export type SliderProps = SliderProps;
+export type GroupProps = GroupProps;
+export type ItemProps = ItemProps;
+export type SliderJSON = SliderJSON;
+export type AssetLibrary = AssetLibrary;
+export { Item, Group, Slider, FromJSON };

src/item.tsx

@@ -22,7 +22,7 @@ type TransformProperty =
   | 'skewX'
   | 'skewY';
 
-interface KeyFrame {
+export interface KeyFrame {
   property: TransformProperty | 'opacity';
   frames: Frame[];
 }
@@ -63,6 +63,9 @@ const getInterpolatedStyles = (
   keyframes.map(keyframe => {
     const { property, frames } = keyframe;
     const inputRange: number[] = [];
+    // This is currently any[] since Animated.interpolate is typed to take homogenous arrays, i.e.
+    // string[] | number[], but not a mix - it will error on (string | number)[]
+    // Current implementation of this method can result in an array of mixed strings and numbers
     const outputRange: any[] = [];
 
     frames.forEach(({ frame, value }) => {