Merge pull request #57 from fawaz-ahmed/transpile-package

transpile package

.github/workflows/npm-publish.yml

@@ -12,10 +12,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14.17.6
           registry-url: https://registry.npmjs.org/
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -10,6 +10,7 @@ dist
 # Dependency directory
 node_modules
 yarn.lock
+package-lock.json
 
 .DS_*
 

.npmignore

@@ -9,4 +9,9 @@ node_modules
 tmp
 
 # Examples (If applicable to your project)
-examples
+example/
+.github/
+.gitignore
+babel.config.js
+yarn.lock
+package-lock.json

README.md

@@ -2,7 +2,7 @@
 
 #### Please :star: it, thanks :thumbsup:
 # react-native-read-more
-React native library to show text in a condensed way and expand when needed. Can be used with native or expo on all platforms.
+React native library to show text in a condensed way and expand when needed. Can be used with native or expo on all platforms. Supports TS/JS both.
 
 ![Example](example/seemore.gif)
 
@@ -98,25 +98,17 @@ yarn android
 # Why another library ?
 This module will calculate where to position `See more` and `See less` within the same paragraph instead of occupying another line. It is a drop-in replacement for `Text` component and you can control when to apply the see more functionality by configuring the `numberOfLines` prop. Moreover, you can also pass your own custom implementation of `Text` component like `ParsedText` ([sample code](https://github.com/fawaz-ahmed/react-native-read-more/issues/37#issuecomment-1047029209)) etc.
 
+## Testing with Jest
+Make sure to add `jest.useFakeTimers();` to your test file.
+See [Stackoverflow post](https://stackoverflow.com/questions/50793885/referenceerror-you-are-trying-to-import-a-file-after-the-jest-environment-has) and [jest timer mocks](https://jestjs.io/docs/timer-mocks)
+
 ## Seeing issues or any feedback or feature suggest ?
 Create an [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues) with github.
 
 ## Troubleshooting
 - If you observe `See more` shown always in android, pass prop `allowFontScaling={false}`, refer to this [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/17)
 - If you have any nested components other than `Text`, refer to this [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/52)
 
-### jest - running unit tests
-This package is not transpiled. So inorder for your test cases to work, this package should be transpiled by babel. For this you need to add this path `!node_modules/@fawazahmed/react-native-read-more/` under `transformIgnorePatterns` option provided by `jest`. In your `package.json` you will see this `jest` config:
-```
-"jest": {
-  "preset": "react-native",
-  "transformIgnorePatterns": [
-    "!node_modules/@fawazahmed/react-native-read-more/" // add this line
-  ]
-}
-```
-refer to jest docs [here](https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization) and github [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/19)
-
 ### Known issues
 `Android only` if `numberOfLines` with a value of `1` is passed down as a prop, text in android devices will overlap at the end of line. This is an issue in `react-native` where text from other lines concatenates into the first one even if we add `\n` to the first line, where the lines returned from `onTextLayout` indicates a different response.
 To overcome this issue, use `numberOfLines` greater than `1`.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset']
+};

example/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {SafeAreaView, StyleSheet, View} from 'react-native';
-import ReadMore from './src/ReadMore';
+import ReadMore from './src';
 
 const App = () => {
   return (

example/ios/example.xcodeproj/project.pbxproj

@@ -561,7 +561,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -627,7 +627,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;

example/src/index.js

@@ -0,0 +1,3 @@
+import ReadMore from './ReadMore';
+
+export default ReadMore;

package.json

@@ -1,11 +1,12 @@
 {
   "name": "@fawazahmed/react-native-read-more",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "A simple react native library to show large blocks of text in a condensed manner with the ability to collapse and expand.",
-  "main": "index.js",
+  "main": "dist/index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel example/src/** -d ./dist"
   },
   "repository": {
     "type": "git",
@@ -24,7 +25,10 @@
     "mobile",
     "ios",
     "android",
-    "ui"
+    "ui",
+    "javascript",
+    "typescript",
+    "inline"
   ],
   "author": {
     "name": "Fawaz Ahmed",
@@ -40,5 +44,14 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "metro-react-native-babel-preset": "^0.68.0"
   }
 }