@regulaforensics/document-reader 9.10.1227-nightly → 9.10.1235-beta

package/examples/ionic/package.json

@@ -19,7 +19,7 @@
     "@ionic/cordova-builders": "^13.0.0",
     "@awesome-cordova-plugins/camera": "^9.6.0",
     "@awesome-cordova-plugins/file": "^9.6.0",
-    "@regulaforensics/document-reader": "9.10.1227-nightly",
+    "@regulaforensics/document-reader": "9.10.1235-beta",
     "@regulaforensics/document-reader-core-fullauthrfid": "9.9.3305",
     "@regulaforensics/document-reader-btdevice": "9.9.140",
     "cordova-android": "^15.1.0",
@@ -34,8 +34,10 @@
     "typescript": "~6.0.3"
   },
   "overrides": {
-    "serialize-javascript": "^7.1.1",
-    "uuid": "^11.1.1"
+    "serialize-javascript": "^7.1.2",
+    "uuid": "^11.1.1",
+    "source-map-js": "^1.2.2",
+    "shell-quote": "^1.11.0"
   },
   "cordova": {
     "plugins": {

package/examples/react_native/app.config.ts

@@ -36,9 +36,12 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   },
   plugins: [
     '@regulaforensics/document-reader',
+    './scripts/withoutMetroServer',
     ['expo-custom-assets', { assetsPaths: ['./assets'] }],
     ['expo-build-properties', {
+      ios: { networkInspector: false },
       android: {
+        networkInspector: false,
         extraMavenRepos: [
           { url: 'https://maven.regulaforensics.com/RegulaDocumentReader' },
           { url: 'https://maven.regulaforensics.com/RegulaDocumentReader/Beta' },

package/examples/react_native/index.tsx

@@ -6,6 +6,23 @@ import { Platform } from 'react-native'
 import { launchImageLibrary } from 'react-native-image-picker'
 import { main } from './src/main'
 
+export async function loadAsset(path: string): Promise<string> {
+  if (Platform.OS === 'ios') path = RNFS.MainBundlePath + "/" + path
+  var readFile = Platform.OS === 'ios' ? RNFS.readFile : RNFS.readFileRes
+  return await readFile(path, 'base64')
+}
+
+export async function pickImage(): Promise<string | null> {
+  var response = await launchImageLibrary({
+    mediaType: 'photo',
+    selectionLimit: 1,
+    includeBase64: true
+  })
+  return response?.assets?.[0].base64!
+}
+
+// --------------------------------------------------------------------------------------------------------------------
+
 var webViewRef: any
 const onclicks: any = {}
 const onMessage = (json: any) => {
@@ -50,32 +67,45 @@ const document = {
 }
 
 function parseValue(value: any) {
-  if (value !== true && value !== false) return `"${value}"`
-  return value
+  const json = JSON.stringify(value)
+  return typeof value === 'string' ? `(window.webImages[${json}] ?? ${json})` : json
+}
+
+async function loadWebUI() {
+  const webRoot = Platform.OS === 'ios' ? RNFS.MainBundlePath + '/web/' : 'web/'
+  const readWebFile = Platform.OS === 'ios' ? RNFS.readFile : RNFS.readFileAssets
+  const readWebDir = Platform.OS === 'ios' ? RNFS.readDir : RNFS.readDirAssets
+  const webImages: Record<string, string> = {}
+  const [styles, content] = await Promise.all(['src/main.css', 'src/main.html'].map(path => readWebFile(webRoot + path, 'utf8')))
+
+  for (const file of (await readWebDir(webRoot + 'images')).filter(file => file.isFile())) {
+    const extension = file.name.split('.').pop()!.toLowerCase()
+    const type = ({ jpg: 'jpeg', svg: 'svg+xml' } as Record<string, string>)[extension] ?? extension
+    webImages['images/' + file.name] = `data:image/${type};base64,${await readWebFile(file.path, 'base64')}`
+  }
+
+  const html = content.replace(/src="([^"]+)"/g, (match, path) => webImages[path] ? `src="${webImages[path]}"` : match)
+  return `<meta name="viewport" content="initial-scale=1, user-scalable=no, viewport-fit=cover">
+<style>${styles}</style>
+<div id="content" style="height: 100%">${html}</div>
+<script>
+  window.webImages = ${JSON.stringify(webImages)};
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    window.ReactNativeWebView.postMessage(JSON.stringify({ id: "ready" }))
+  }))
+</script>`
 }
 
 (globalThis as any).document = document;
-registerRootComponent(() =>
-  <WebView
+registerRootComponent(() => {
+  const [html, setHtml] = React.useState('')
+  React.useEffect(() => { loadWebUI().then(setHtml).catch(console.error) }, [])
+  return html ? <WebView
     ref={ref => { webViewRef = ref }}
     onMessage={onMessage}
-    source={require("./index.html")}
+    originWhitelist={['*']}
+    source={{ html }}
     scrollEnabled={false}
     overScrollMode={'content'}
-  />
-)
-
-export async function loadAsset(path: string): Promise<string> {
-  if (Platform.OS === 'ios') path = RNFS.MainBundlePath + "/" + path
-  var readFile = Platform.OS === 'ios' ? RNFS.readFile : RNFS.readFileRes
-  return await readFile(path, 'base64')
-}
-
-export async function pickImage(): Promise<string | null> {
-  var response = await launchImageLibrary({
-    mediaType: 'photo',
-    selectionLimit: 1,
-    includeBase64: true
-  })
-  return response?.assets?.[0].base64!
-}
+  /> : null
+})

package/examples/react_native/metro.config.js

@@ -1,7 +1,5 @@
 const config = require('expo/metro-config').getDefaultConfig(__dirname)
 config.watchFolders = [
-    __dirname + '/node_modules'
 ]
-config.resolver.nodeModulesPaths = config.watchFolders
-config.resolver.assetExts.push('css')
+config.resolver.nodeModulesPaths = [__dirname + '/node_modules']
 module.exports = config