WIP supports Typescript, drops Component

Author: smellman

StaticServerExample/.eslintrc.js

@@ -0,0 +1,106 @@
+/**
+ * Sample React Native Static Server
+ * https://github.com/futurepress/react-native-static-server
+ * @flow
+ */
+
+import React, { useState, useEffect } from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image
+} from 'react-native'
+
+// requires react-native-webview, see: https://github.com/uuidjs/uuid#getrandomvalues-not-supported
+import 'react-native-get-random-values'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { v4 as uuidv4 } from 'uuid'
+import StaticServer from 'react-native-static-server'
+import RNFetchBlob from 'rn-fetch-blob'
+import { WebView } from 'react-native-webview'
+
+interface ITestViewProps {
+  port?: number
+  root?: string
+  file?: string
+}
+
+export default function App (props: ITestViewProps): JSX.Element {
+  const [origin, setOrigin] = useState<string>('')
+  const [server, setServer] = useState<StaticServer>(null)
+  const port = typeof props.port !== 'undefined' ? props.port : 3030
+  const root = typeof props.root !== 'undefined' ? props.root : 'www/'
+  const file = typeof props.file !== 'undefined' ? props.file : 'index.html'
+
+  useEffect(() => {
+    if (origin === '') {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const index = require('./index.html')
+      const { uri } = Image.resolveAssetSource(index)
+      const path = RNFetchBlob.fs.dirs.DocumentDir + '/' + root
+      const dest = path + file
+      const startServer = async (): Promise<void> => {
+        const newServer = new StaticServer(port, root, { localOnly: true })
+        const origin = await newServer.start()
+        setOrigin(origin)
+        setServer(newServer)
+      }
+      const prepare = async (): Promise<void> => {
+        try {
+          await RNFetchBlob.fs.mkdir(path)
+        } catch (e) {
+          console.log(`directory is created ${path}`)
+        }
+        let added: Promise<boolean>
+        if (uri.includes('file://')) {
+          // Copy file in release
+          const result = await RNFetchBlob.fs.exists(dest)
+          if (!result) {
+            added = RNFetchBlob.fs.cp(uri, dest)
+          }
+        } else {
+          // Download for development
+          const result = await RNFetchBlob.config({ fileCache: true }).fetch('GET', uri)
+          added = RNFetchBlob.fs.mv(result.path(), dest)
+        }
+        try {
+          await added
+        } catch (e) {
+          console.log(e)
+        }
+        await startServer()
+      }
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      prepare()
+      return () => {
+        if (server !== null) {
+          server.kill()
+        }
+      }
+    }
+  }, [])
+
+  if (origin !== '') {
+    return <WebView
+      source={{ uri: `${origin}/${file}` }}
+      style={styles.webview}
+    />
+  }
+  return <View style={styles.container}>
+    <Text>Loading...</Text>
+  </View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF'
+  },
+  webview: {
+    marginTop: 20,
+    flex: 1
+  }
+})

StaticServerExample/App.js

@@ -2,13 +2,14 @@
  * @format
  */
 
-import 'react-native';
-import React from 'react';
-import App from '../App';
+import 'react-native'
+import React from 'react'
+import App from '../App'
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+import renderer from 'react-test-renderer'
 
+// eslint-disable-next-line no-undef
 it('renders correctly', () => {
-  renderer.create(<App />);
-});
+  renderer.create(<App />)
+})

StaticServerExample/App.tsx

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

StaticServerExample/__tests__/App-test.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import App from './App';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native'
+import App from './App'
+import { name as appName } from './app.json'
 
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => App)

StaticServerExample/babel.config.js

@@ -20,12 +20,48 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/runtime": "^7.9.2",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.2",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
     "babel-jest": "^25.3.0",
+    "eslint": "^6.8.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-config-standard-with-typescript": "^15.0.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-standard": "^4.0.1",
     "jest": "^25.3.0",
     "metro-react-native-babel-preset": "^0.59.0",
-    "react-test-renderer": "16.11.0"
+    "react-test-renderer": "16.11.0",
+    "typescript": "^3.8.3"
   },
   "jest": {
-    "preset": "react-native"
-  }
+    "preset": "react-native",
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "standard-with-typescript",
+      "standard-react"
+    ],
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "rules": {
+      "react/jsx-closing-bracket-location": "off",
+      "react/jsx-closing-tag-location": "off"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/*",
+    "dist/*",
+    "coverage/*",
+    "**/*.d.ts",
+    "/src/public/",
+    "/src/types/"
+  ]
 }

StaticServerExample/index.js

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "target": "ESNext",
+    "module": "esnext",
+    "jsx": "react-native",
+    "lib": ["dom", "ESNext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["jest"],
+    "declaration": true
+  }
+}