@fto-consult/expo-ui 2.49.5 → 3.0.0

package/babel.config.alias.js

@@ -1,15 +1,16 @@
 const path = require("path");
 module.exports = (opts)=>{
     const dir = path.resolve(__dirname);
+    const base = opts.base || process.cwd();
     const assets = path.resolve(dir,"assets");
     opts = typeof opts =='object' && opts ? opts : {};
     opts.platform = "expo";
     opts.assets = opts.assets || opts.alias && typeof opts.alias =='object' && opts.alias.$assets || assets;
-    opts.base = opts.base || dir;
+    opts.base = opts.base || base;
     opts.withPouchDB = opts.withPouchDB !== false && opts.withPouchdb !== false ? true : false;
     delete opts.withPouchdb;
     const r = require(`@fto-consult/common/babel.config.alias`)(opts);
-    const expo = require("./lookup-expo-ui-path")()?path.resolve(r.$src,"..","expo-ui","src") : path.resolve(dir,"src");
+    const expo = path.resolve(require("./expo-ui-path")(),"src");
     r["$eauth"] = path.resolve(expo,"auth");
     r["$ecomponents"] = r["$expo-components"] = path.resolve(expo,"components");
     r["$etableLink"] = r["$eTableLink"] = path.resolve(r["$ecomponents"],"TableLink");

package/babel.config.js

@@ -1,12 +1,13 @@
 module.exports = function(api,opts) {
     opts = typeof opts =='object' && opts ? opts : {};
+    api = api && typeof api =='object'? api : {};
     ///les chemin vers la variable d'environnement, le chemin du fichier .env,@see : https://github.com/brysgo/babel-plugin-inline-dotenv
     let environmentPath = opts.environmentPath || opts.envPath;
     //console.log(environmentPath," is envvv ",opts);
     const path = require("path");
     const fs = require("fs");
     const dir = path.resolve(__dirname);
-    api.cache(true);
+    typeof api.cache =='function' && api.cache(true);
     const inlineDovOptions = {};
     const options = {base:dir,...opts,platform:"expo"};
     /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base  */

package/bin/electron/index.js

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+/**@see : https://blog.shahednasser.com/how-to-create-a-npx-tool/ */
+'use strict';
+process.on('unhandledRejection', err => {
+  throw err;
+});
+const spawnAsync = require('cross-spawn').spawn;
+const { realpathSync } = require('fs-extra');
+
+//const { ensureMinProjectSetupAsync } = require('../build/Config');
+
+const args = process.argv.slice(2);
+
+const scriptIndex = args.findIndex(x => x === 'start' || x === 'customize');
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
+console.log(args," is argggggg",script);
+if (['start', 'customize'].includes(script)) {
+  spawnAsync(
+    'node',
+    nodeArgs.concat(require.resolve('./scripts/' + script)).concat(args.slice(scriptIndex + 1)),
+    { stdio: 'inherit' }
+  ).then(result => {
+    if (result.signal) {
+      if (result.signal === 'SIGKILL') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'This probably means the system ran out of memory or someone called ' +
+            '`kill -9` on the process.'
+        );
+      } else if (result.signal === 'SIGTERM') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'Someone might have called `kill` or `killall`, or the system could ' +
+            'be shutting down.'
+        );
+      }
+      process.exit(1);
+    }
+    process.exit(result.status);
+  });
+} else if (script === undefined) {
+  const projectRoot = realpathSync(process.cwd());
+
+  //ensureMinProjectSetupAsync(projectRoot);
+} else {
+  console.log('Invalid command "' + script + '".');
+}

package/bin/electron/scripts/customize.js

@@ -0,0 +1,21 @@
+const chalk = require('chalk');
+const fs = require('fs-extra');
+
+const { copyTemplateToProject, ensureMinProjectSetupAsync } = require('..');
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+const projectRoot = fs.realpathSync(process.cwd());
+
+console.log();
+console.log(chalk.magenta('\u203A Copying Expo Electron main process to local project...'));
+
+copyTemplateToProject(projectRoot);
+ensureMinProjectSetupAsync(projectRoot);
+
+console.log(
+  chalk.magenta(
+    '\u203A You can now edit the Electron main process in the `electron/main` folder of your project...'
+  )
+);

package/bin/electron/scripts/start.js

@@ -0,0 +1,8 @@
+const { ensureElectronConfig } = require('..');
+
+ensureElectronConfig(process.cwd());
+
+process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 1;
+process.env.platform = "electron";
+
+require('electron-webpack/out/dev/dev-runner');

package/compiler.config.js

@@ -1,21 +1,20 @@
 const path = require("path");
-module.exports = function({config,isNext,nodeModulesPath,base,dir}){
-    const root = path.resolve(dir,"..");
-    base = base || dir;
+module.exports = function({config,nodeModulesPath}){
+    const base = process.cwd();
+    const expoUi = path.resolve(require("./expo-ui-path")());
     nodeModulesPath = Array.isArray(nodeModulesPath)? nodeModulesPath : [];
     config.resolve.modules = Array.isArray(config.resolve.modules)? config.resolve.modules:[]
-    config.resolve.modules = [path.resolve(dir, 'node_modules'),path.resolve(root, 'node_modules'), 'node_modules',...nodeModulesPath,...config.resolve.modules];
+    config.resolve.modules = [path.resolve(base, 'node_modules'), 'node_modules',...nodeModulesPath,...config.resolve.modules];
     config.module.rules.push({
         test: /\.(js|jsx|ts|tsx)$/,
         include: [
-            dir,
             base,
-            path.resolve(dir,"node_modules","@fto-consult"),
+            path.resolve(expoUi,"node_modules","@fto-consult"),
             /(common)/
         ],
         exclude:[
-            path.resolve(dir,"node_modules"),
-            path.resolve(root,"node_modules"),
+            path.resolve(base,"nodes_modules"),
+            path.resolve(expoUi,"node_modules"),
             /node_modules[/\\](?!react-native-paper|react-native|react-native-vector-icons|react-native-safe-area-view)/,
             /(node_modules)/
         ],

package/electron/webpack.config.js

@@ -1,45 +1,84 @@
-const createExpoWebpackConfigAsync = require('@expo/webpack-config');
-const envManager = require("@expo/webpack-config/env");
-const addons = require("@expo/webpack-config/addons");
-const jsonfile = require('jsonfile');
+/**@see : https://www.npmjs.com/package/@expo/webpack-config/v/0.11.4 */
+const createExpoWebpackConfigAsync = require('@expo/webpack-config')
 const path = require("path");
-const mode = 'development';
 const isObj = x => x && typeof x =='object' && !Array.isArray(x);
-/***@see : https://www.npmjs.com/package/@expo/webpack-config */
-module.exports = async function(env, argv) {
-  const projectRoot = process.cwd()
-  const electronPath = path.join(projectRoot,'electron');
-  env = env || {};
-  env.projectRoot = projectRoot;
-  env.platform = "electron";//isObj(env.platform)? env.platform : {};//'web'///electron;
-  //env.platform.type = "electron";
-  env.locations = (0, envManager.getPaths)(projectRoot)
-  env.pwa = false;
-  let config = (0, addons.withAlias)({}, (0, envManager.getAliases)(projectRoot));
-  if(argv && typeof argv =='object' && (argv.mode =='production' || argv.mode =="development")){
-    env.mode = argv.mode;
-  } else {
-      env.mode = mode;
-  }
-  config = await createExpoWebpackConfigAsync(env, argv);
-  config.output = config.output || {};
-  config.output.publicPath = "./";
-  config.output.path = path.join(electronPath,"dist");
-  if (!config.plugins) config.plugins = [];
-  if (!config.resolve) config.resolve = {}; 
-  for(let i in config.plugins){
-      let pl = config.plugins[i];
-      //on recherche le fichier html build de webpack
-      if(pl && typeof pl =='object' && pl.options && typeof pl.options =='object'){
-          if(typeof pl.options.filename =="string" && pl.options.filename.toLowerCase().includes("index.html")){
-               pl.options.filename = path.join(config.output.path,"index.html");
-               break;
-          }
+// Expo CLI will await this method so you can optionally return a promise.
+module.exports = async function(env, argv,opts) {
+    const dir = path.resolve(__dirname);
+    env = env || {};
+    opts = typeof opts =="object" && opts ? opts : {};
+    const babel = isObj(opts.babel)? opts.babel : {};
+    const isElectron = typeof env.platform =="string" && env.platform.toLowerCase().trim() ==='electron';
+    if(isElectron){
+       env.platform = "electron";
+       env.mode = env.mode =="production" && "production" || "development";
+       env.pwa = false;
+    }
+    const transpileModules = Array.isArray(opts.transpileModules)? opts.transpileModules : [];
+    const config = await createExpoWebpackConfigAsync(
+      {
+        ...env,
+        babel: {
+          ...babel,
+          dangerouslyAddModulePathsToTranspile: [
+            // Ensure that all packages starting with @fto-consult are transpiled.
+            '@fto-consult',
+            ...transpileModules,
+          ],
+        },
+      },
+      argv
+    );
+    config.module.rules.push(
+      {
+          test: /.mjs$/,
+          include: /node_modules/,
+          include: /node_modules/,
+          type: "javascript/auto",
+          use: {loader: 'babel-loader'}
+    });
+    //config.resolve.alias['moduleA'] = 'moduleB';
+    config.mode = (config.mode =="development" || config.mode =='production') ? config.mode  : "development";
+    // Maybe you want to turn off compression in dev mode.
+    if (config.mode === 'development') {
+      config.devServer.compress = false;
+    }
+    // Or prevent minimizing the bundle when you build.
+    if (config.mode === 'production') {
+      config.optimization.minimize = true;
+    }
+    config.performance = typeof config.performance =="object" && config.performance ? config.performance : {};
+    config.performance.hints = "hints" in config.performance ? config.performance.hints : false;
+    config.performance.maxEntrypointSize = typeof config.performance.maxEntrypointSize =='number'? config.performance.maxEntrypointSize : 512000;
+    config.performance.maxAssetSize = typeof config.performance.maxAssetSize =='number'? config.performance.maxAssetSize : 512000;
+    config.devtool = (config.mode === 'development') ? 'inline-source-map' : false;
+    require("./compiler.config.js")({config,...opts,dir});
+    if(isElectron){
+      const electronPath = process.cwd();
+      config.output = config.output || {};
+      config.output.publicPath = "./";
+      config.output.path = path.join(electronPath,"dist");
+      if(isObj(config.node)){
+        config.resolve.fallback = isObj(config.resolve.fallback)? config.resolve.fallback : {};
+        for(let i in config.node){
+           if(config.node[i] =="empty"){
+             config.resolve.fallback[i] = false;
+           } else config.resolve.fallback[i] = config.node[i];
+           delete config.node[i];
+        }
+        config.resolve.byDependency = {
+          // ...
+          esm: {
+            mainFields: ['browser', 'module'],
+          },
+          commonjs: {
+            aliasFields: ['browser'],
+          },
+          url: {
+            preferRelative: true,
+          },
+        }
       }
-  }
-  //console.log(config.resolve.extensions, "is r extensions")
-  config.resolve.extensions = (0, envManager.getModuleFileExtensions)('electron', 'web');
-  //jsonfile.writeFileSync("electron/config.back.json", config, {spaces: 4});
-  console.log("******electron config file generated**********");
-  return config;
+    }
+    return config;
 };

package/electron/webpack.config.old.js

@@ -0,0 +1,45 @@
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+const envManager = require("@expo/webpack-config/env");
+const addons = require("@expo/webpack-config/addons");
+const jsonfile = require('jsonfile');
+const path = require("path");
+const mode = 'development';
+const isObj = x => x && typeof x =='object' && !Array.isArray(x);
+/***@see : https://www.npmjs.com/package/@expo/webpack-config */
+module.exports = async function(env, argv) {
+  const projectRoot = process.cwd()
+  const electronPath = path.join(projectRoot,'electron');
+  env = env || {};
+  env.projectRoot = projectRoot;
+  env.platform = "electron";//isObj(env.platform)? env.platform : {};//'web'///electron;
+  //env.platform.type = "electron";
+  env.locations = (0, envManager.getPaths)(projectRoot)
+  env.pwa = false;
+  let config = (0, addons.withAlias)({}, (0, envManager.getAliases)(projectRoot));
+  if(argv && typeof argv =='object' && (argv.mode =='production' || argv.mode =="development")){
+    env.mode = argv.mode;
+  } else {
+      env.mode = mode;
+  }
+  config = await createExpoWebpackConfigAsync(env, argv);
+  config.output = config.output || {};
+  config.output.publicPath = "./";
+  config.output.path = path.join(electronPath,"dist");
+  if (!config.plugins) config.plugins = [];
+  if (!config.resolve) config.resolve = {}; 
+  for(let i in config.plugins){
+      let pl = config.plugins[i];
+      //on recherche le fichier html build de webpack
+      if(pl && typeof pl =='object' && pl.options && typeof pl.options =='object'){
+          if(typeof pl.options.filename =="string" && pl.options.filename.toLowerCase().includes("index.html")){
+               pl.options.filename = path.join(config.output.path,"index.html");
+               break;
+          }
+      }
+  }
+  //console.log(config.resolve.extensions, "is r extensions")
+  config.resolve.extensions = (0, envManager.getModuleFileExtensions)('electron', 'web');
+  //jsonfile.writeFileSync("electron/config.back.json", config, {spaces: 4});
+  console.log("******electron config file generated**********");
+  return config;
+};

package/expo-ui-path.js

@@ -5,17 +5,21 @@
 const fs = require("fs");
 const path = require("path");
 ///retourne le chemin vers le package @expo-ui
-module.exports = function (...args){
-    const suffix = path.join(...args);
+module.exports = function (){
+    const ag = Array.prototype.slice.call(arguments,0);
+    let suffix ="";
+    ag.map(p=>{
+        if(typeof p ==='string' && p){
+            suffix = path.join(suffix,p);
+        }
+    })
     const expoUIPath = "@fto-consult/expo-ui";
     const sep = path.sep;
-    const p = require("./lookup-expo-ui-path")();
-    if(p && fs.existsSync(p)){
-        const rootPath = path.resolve(p,"..");
-        const src = path.resolve(rootPath,"src");
-        if(fs.existsSync(src) && fs.existsSync((path.resolve(rootPath,"babel.config.js")))){
-            return path.resolve(p,suffix).replace(sep,(sep+sep));
-        }
+    const rootPath = process.cwd();
+    const src = path.resolve(rootPath,"src");
+    const expoUi = path.resolve(rootPath,"expo-ui");
+    if(fs.existsSync(src) && fs.existsSync(expoUi) && fs.existsSync(path.resolve(expoUi,"webpack.config.js"))){
+        return path.resolve(expoUi,suffix).replace(sep,(sep+sep));
     }
     return suffix ? path.join(expoUIPath,suffix).replace(sep,"/"): expoUIPath;
 };

package/metro.config.js

@@ -1,12 +1,11 @@
 const { getDefaultConfig } = require('@expo/metro-config');
 const path = require("path");
-module.exports = (opts)=>{
+module.exports = function(opts){
   opts = opts && typeof opts =='object'? opts : {};
-  let {dir,assetExts,sourceExts} = opts;
+  let {assetExts,sourceExts} = opts;
   assetExts = Array.isArray(assetExts)? assetExts: [];
   sourceExts= Array.isArray(sourceExts)?sourceExts : [];
-  dir = dir || path.resolve(__dirname);
-  const projectRoot = path.resolve(dir);
+  const projectRoot = process.cwd();
   const localDir = path.resolve(__dirname);
   const config = getDefaultConfig(projectRoot);
   config.watchFolders = [projectRoot];
@@ -23,7 +22,6 @@ module.exports = (opts)=>{
       ...config.resolver.sourceExts,
       ...sourceExts,"txt",
       'jsx', 'js','tsx',
-      //"mjs","cjs",
   ]
   // Remove all console logs in production...
   config.transformer.minifierConfig.compress.drop_console = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.49.5",
+  "version": "3.0.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -28,9 +28,8 @@
     "install-apk": "adb -s emulator-5554 install myapp.apk",
     "android-emulator": "emulator -avd EMULATOR",
     "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
-    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
     "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
-    "compile-electron": "webpack --config ./electron/webpack.config.js",
+    "compile-electron": "webpack --env platform=electron",
     "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
     "electron": "electron ./electron",
     "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
@@ -43,6 +42,9 @@
     "delete-node-modules": "rimraf ./**/node_modules",
     "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'"
   },
+  "bin": {
+    "electron": "bin/electron/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/borispipo/expo-ui.git"

package/src/components/HeavyScreen/index.js

@@ -13,7 +13,7 @@ const OptimizedHeavyScreen = React.forwardRef(({
     </Transition.Together>
   ),
   style,
-  children,
+  children:cChildren,
   isLoading,
   timeout,
   testID,
@@ -23,6 +23,7 @@ const OptimizedHeavyScreen = React.forwardRef(({
   timeout = isNumber(timeout)? timeout : isNumber(transitionTimeout)? transitionTimeout : undefined;
   const { transitionRef, areInteractionsComplete } = useAfterInteractions(timeout);
   let Placeholder = placeholder;
+  const children = React.useStableMemo(()=>cChildren,[cChildren])
   placeholder = React.isComponent(Placeholder)? <Placeholder /> : React.isValidElement(Placeholder)? Placeholder :  null;
   return (
     <Transitioning.View

package/webpack.config.js

@@ -1,15 +1,24 @@
 /**@see : https://www.npmjs.com/package/@expo/webpack-config/v/0.11.4 */
 const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+const path = require("path");
+const isObj = x => x && typeof x =='object' && !Array.isArray(x);
 // Expo CLI will await this method so you can optionally return a promise.
 module.exports = async function(env, argv,opts) {
-    const path = require("path");
-    const dir = path.resolve(__dirname);
+    env = env || {};
     opts = typeof opts =="object" && opts ? opts : {};
+    const babel = isObj(opts.babel)? opts.babel : {};
+    const isElectron = typeof env.platform =="string" && env.platform.toLowerCase().trim() ==='electron';
+    if(isElectron){
+       env.platform = "electron";
+       env.mode = env.mode =="production" && "production" || "development";
+       env.pwa = false;
+    }
     const transpileModules = Array.isArray(opts.transpileModules)? opts.transpileModules : [];
     const config = await createExpoWebpackConfigAsync(
       {
         ...env,
         babel: {
+          ...babel,
           dangerouslyAddModulePathsToTranspile: [
             // Ensure that all packages starting with @fto-consult are transpiled.
             '@fto-consult',
@@ -23,12 +32,11 @@ module.exports = async function(env, argv,opts) {
       {
           test: /.mjs$/,
           include: /node_modules/,
-          include: /node_modules/,
           type: "javascript/auto",
           use: {loader: 'babel-loader'}
     });
     //config.resolve.alias['moduleA'] = 'moduleB';
-    config.mode = config.mode =="development" || config.mode =='production' ? config.mode  : "development";
+    config.mode = (config.mode =="development" || config.mode =='production') ? config.mode  : "development";
     // Maybe you want to turn off compression in dev mode.
     if (config.mode === 'development') {
       config.devServer.compress = false;
@@ -37,6 +45,17 @@ module.exports = async function(env, argv,opts) {
     if (config.mode === 'production') {
       config.optimization.minimize = true;
     }
-    require("./compiler.config.js")({config,...opts,dir})
+    config.performance = typeof config.performance =="object" && config.performance ? config.performance : {};
+    config.performance.hints = "hints" in config.performance ? config.performance.hints : false;
+    config.performance.maxEntrypointSize = typeof config.performance.maxEntrypointSize =='number'? config.performance.maxEntrypointSize : 512000;
+    config.performance.maxAssetSize = typeof config.performance.maxAssetSize =='number'? config.performance.maxAssetSize : 512000;
+    config.devtool = (config.mode === 'development') ? 'inline-source-map' : false;
+    require("./compiler.config.js")({config,...opts});
+    if(isElectron){
+      const electronPath = process.cwd();
+      config.output = config.output || {};
+      config.output.publicPath = "./";
+      config.output.path = path.join(electronPath,"dist");
+    }
     return config;
 };

package/expo-ui-current-script.js

@@ -1,21 +0,0 @@
-// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/*** permet de vérifier si le dossier expo-ui existe à la racine du projet si oui, 
- * en mode développement, c'est le contenu de ce dossier qui sera chargé pour faire référence au module 
- * @fto-consult/expo-ui, afin de faciliter le développement dudit package
- * @param {string} currentScriptFilePath - le chemin complet du script node en cours d'exécution
- * @return {boolean} qui détermine si le dossier local expo-ui est présent où non
- */
-module.exports = (currentScriptFilePath)=>{
-    const fs = require("fs");
-    const path = require("path");
-    const fileName = path.basename(currentScriptFilePath);
-    const expoUIPath = require("./expo-ui-path");
-    if(expoUIPath){
-        const eP = path.resolve(expoUIPath,fileName);
-        return fs.existsSync(eP) && eP != currentScriptFilePath ? eP : null;
-    }
-    return false;
-}

package/lookup-expo-ui-path.js

@@ -1,24 +0,0 @@
-// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-const fs = require("fs");
-const path = require("path");
-const dir = path.resolve(__dirname)
-module.exports = function lookupForExpoUIPath (){
-    let level = 4; //jusqu'à 4 niveaux
-    let expoUIPath= null;
-    let rootPath = path.resolve(dir);
-    while(level>0 && !expoUIPath){
-        const p = path.resolve(rootPath,"expo-ui");
-        const nPath = path.resolve(rootPath,"node_modules");
-        const srcPath = path.resolve(rootPath,"src");
-        const metroPath = path.resolve(rootPath,"metro.config.js");
-        if(fs.existsSync(p) && fs.existsSync(nPath) && fs.existsSync(srcPath) && fs.existsSync(metroPath)){
-            expoUIPath = p;
-            return expoUIPath;
-        }
-        rootPath = path.resolve(rootPath,"..");
-        level = level-1;
-    }
-    return expoUIPath;
-}

package/parent-package.js

@@ -1,12 +0,0 @@
-// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
-// Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
-
-/**** cette fonction a pour rôle de retourner le package parent à celui ci */
-module.exports = (()=>{
-    const pathToParent = require("parent-package-json")(); // Will return false if no parent exists
-    if (pathToParent !== false) {
-        return pathToParent.path;
-    }
-    return "";
-})();