@wavemaker/rn-codegen 11.7.0-rc.161 → 11.7.0-rc.162

rn-codegen/src/templates/project/esbuild/@react-navigation/drawer/6.6.3/lib/module/views/modern/Overlay.js

@@ -0,0 +1,60 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { Platform, Pressable, StyleSheet } from 'react-native';
+import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
+const PROGRESS_EPSILON = 0.05;
+const Overlay = /*#__PURE__*/React.forwardRef(function Overlay(_ref, ref) {
+  let {
+    progress,
+    onPress,
+    style,
+    accessibilityLabel = 'Close drawer',
+    ...props
+  } = _ref;
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: progress.value,
+      // We don't want the user to be able to press through the overlay when drawer is open
+      // We can send the overlay behind the screen to avoid it
+      zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1
+    };
+  }, [progress, PROGRESS_EPSILON]);
+  const animatedProps = useAnimatedProps(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+    return {
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants'
+    };
+  }, [progress, PROGRESS_EPSILON]);
+  return /*#__PURE__*/React.createElement(Animated.View, _extends({}, props, {
+    ref: ref,
+    style: [styles.overlay, overlayStyle, animatedStyle, style],
+    animatedProps: animatedProps
+  }), /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    style: styles.pressable,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel
+  }));
+});
+const overlayStyle = Platform.select({
+  web: {
+    // Disable touch highlight on mobile Safari.
+    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.
+    WebkitTapHighlightColor: 'transparent'
+  },
+  default: {}
+});
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  pressable: {
+    flex: 1,
+    pointerEvents: 'auto'
+  }
+});
+export default Overlay;
+//# sourceMappingURL=Overlay.js.map

rn-codegen/src/templates/project/esbuild/esbuild.script.js

@@ -27,13 +27,16 @@ class EsBuilder {
     }
   }
 
-  prepareIndexHtml() {
+  prepareIndexHtml(result) {
     console.log('build success');
     try {
     const bundleName = fs.readdirSync('./web-build').find(n => /^bundle.*js$/.test(n));
     let content = fs.readFileSync(__dirname + '/index.html', 'utf-8');
     content = content.replace(/".\/bundle.js"/, `"./${bundleName}"`);
     fs.writeFileSync('./web-build/index.html', content);
+
+    const metafilePath = path.join(__dirname, './', 'metafile.json');
+    fs.writeFileSync(metafilePath, JSON.stringify(result.metafile));
     } catch (err) {
       console.error(err);
     }
@@ -136,6 +139,10 @@ class EsBuilder {
           );
         }`;
     });
+    const target = `${__dirname}/../node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace('console.error', '// console.error');
+    });
     console.log('Patched react-native-web');
   }
 
@@ -147,6 +154,101 @@ class EsBuilder {
     }
   }
 
+  async patchReactNativeAssetRegistry() {
+    const content = `
+    /**
+     * Copyright (c) Meta Platforms, Inc. and affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     *
+     * @flow strict
+     * @format
+     */
+    
+    'use strict';
+    
+    const assets = [];
+    
+    function registerAsset(asset) {
+      // push returns new array length, so the first asset will
+      // get id 1 (not 0) to make the value truthy
+      return assets.push(asset);
+    }
+    
+    function getAssetByID(assetId) {
+      return assets[assetId - 1];
+    }
+    
+    module.exports = {registerAsset, getAssetByID};
+    
+    `;
+    fs.writeFileSync(`${__dirname}/../node_modules/@react-native/assets-registry/registry.js`, content);
+    const expoAssetRegistry = `${__dirname}/../node_modules/expo-asset/node_modules/@react-native/assets-registry/registry.js`;
+    readAndReplaceFileContent(expoAssetRegistry, () => content);
+    console.log('Patched @react-native/assets-registry');
+  }
+
+  async patchBabelExpoPreset() {
+    const target = `${__dirname}/../node_modules/babel-preset-expo/build/index.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(
+        `(0, common_1.hasModule)('react-native-reanimated') &&`,
+        `//(0, common_1.hasModule)('react-native-reanimated') &&`)
+        .replace(
+          `platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],`,
+          `//platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],`
+        )
+    });
+    console.log('Patched babel-expo-preset');
+  }
+
+  async patchUUID() {
+    const target = `${__dirname}/../node_modules/expo-modules-core/build/uuid/uuid.web.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(`require('crypto')`, 'crypto');
+    });
+    console.log('Patched UUID.');
+  }
+
+  async patchExpoRootComponent() {
+    const target = `${__dirname}/../node_modules/expo/build/launch/registerRootComponent.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(`export default`, 
+      `
+      const process = {env: {
+        NODE_ENV: 'development',
+        EXPO_PUBLIC_USE_STATIC: '0'
+      }};
+      export default `);
+    });
+    console.log('Patched Expo Root Component.');
+  }
+
+  async patchReactNavigation() {
+    // https://github.com/react-navigation/react-navigation/pull/11496/files
+    fs.copyFileSync(
+      `${__dirname}/@react-navigation/drawer/6.6.3/lib/module/views/modern/Drawer.js`,
+      `${__dirname}/../node_modules/@react-navigation/drawer/lib/module/views/modern/Drawer.js`
+    );
+    fs.copyFileSync(
+      `${__dirname}/@react-navigation/drawer/6.6.3/lib/module/views/modern/Overlay.js`,
+      `${__dirname}/../node_modules/@react-navigation/drawer/lib/module/views/modern/Overlay.js`
+    );
+    console.log('Patched React Navigation.');
+  }
+
+  async patchReactNativeReanimated() {
+    await readAndReplaceFileContent(`${__dirname}/../node_modules/react-native-reanimated/lib/module/reanimated2/PlatformChecker.js`, (c) => {
+      return c.replace(
+        '!!process.env.JEST_WORKER_ID',
+        'false; // !!process.env.JEST_WORKER_ID'
+      )
+    });
+    console.log('Patched React Native Reanimated.');
+  }
+
+
   buildLibraries() {
     const promises = [{
       name: 'expo-web-browser',
@@ -182,6 +284,12 @@ class EsBuilder {
         .then(() => this.patchReactNativeWeb())
         .then(() => this.patchReactNativeAssets())
         .then(() => this.patchCamera())
+        .then(() => this.patchReactNativeAssetRegistry())
+        .then(() => this.patchBabelExpoPreset())
+        .then(() => this.patchUUID())
+        .then(() => this.patchExpoRootComponent())
+        .then(() => this.patchReactNavigation())
+        .then(() => this.patchReactNativeReanimated())
         .then(() => {
           console.log('*********** LIBRARIES ARE BUILT FOR ESBUILD **************');
         }, (e) => {
@@ -202,7 +310,9 @@ class EsBuilder {
       define: {'process.env.NODE_ENV': '"development"', '__DEV__': false, global:'window'},
       resolveExtensions: ['.web.tsx','.web.ts','.web.jsx','.web.js','.tsx','.ts','.jsx','.js',],
       loader: {".png": "file", ".jpeg": "file", ".ttf": "file", ".js": "jsx", ".gif": "file", ".svg": "file" },
-      minify: false,
+      minifyWhitespace: true,
+      minifySyntax: true,
+      metafile: true,
       sourcemap: true,
       plugins: [babel({
         filter: /\/src\/.*jsx?/,
@@ -212,7 +322,11 @@ class EsBuilder {
             esmodules: true
           },
           sourceMaps: 'inline',
-          plugins: [__dirname + '/../scripts/wm-babel.transform.plugin.js']
+          plugins: [
+            __dirname + '/../scripts/wm-babel.transform.plugin.js', 
+            '@babel/plugin-proposal-export-namespace-from',
+            'react-native-reanimated/plugin',
+          ]
         }
       }), resolve({
         'victory-native': 'victory'
@@ -225,11 +339,13 @@ class EsBuilder {
     console.time('react native with esbuild');
     this.cleanBuildDir();
     this.build()
-    .then(() => this.prepareIndexHtml())
+    .then((result) => this.prepareIndexHtml(result))
     .then(() => {
       console.timeEnd('react native with esbuild');
       console.log('*********** REACT NATIVE ESBUILD SUCCESSFUL **************');
-    }).catch(() => {
+    }).catch((error) => {
+      console.log('*********** REACT PROJECT ESBUILD ERROR **************');
+      console.error(error);
       console.timeEnd('react native with esbuild');
       console.log('*********** REACT PROJECT ESBUILD FAILED **************');
     });

rn-codegen/src/templates/project/metro.config.js

@@ -11,6 +11,13 @@ module.exports = (async () => {
         ];
         config.resolver.disableHierarchicalLookup = true;
         config.transformer = {
+            ...config.transformer,
+            minifierPath: 'metro-minify-terser',
+            minifierConfig: {
+                compress:{
+                    drop_debugger: false
+                }
+            },
             babelTransformerPath: require.resolve('react-native-svg-transformer'),
             getTransformOptions: async () => ({
                 transform: {
@@ -20,6 +27,7 @@ module.exports = (async () => {
             })
         }
         config.resolver = {
+            ...config.resolver,
             assetExts: config.resolver.assetExts.filter(ext => ext !== 'svg'),
             sourceExts: [...config.resolver.sourceExts, 'svg']
         }