Fix creating and building example and cleanup code around it (#75)

Author: maicki

.gitignore

@@ -1,4 +1,29 @@
+### macOS ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
 node_modules
 npm-debug.log
-
-example

lib.js

@@ -4,7 +4,7 @@ const pascalCase = require('pascal-case');
 const paramCase = require('param-case');
 
 const templates = require('./templates');
-const { hasPrefix, createFile, createFolder } = require('./utils');
+const { hasPrefix, createFile, createFolder, npmAddScriptSync, exec } = require('./utils');
 const { execSync } = require('child_process');
 
 const DEFAULT_NAME = 'Library';
@@ -13,12 +13,21 @@ const DEFAULT_MODULE_PREFIX = 'react-native';
 const DEFAULT_PACKAGE_IDENTIFIER = 'com.reactlibrary';
 const DEFAULT_PLATFORMS = ['android', 'ios', 'windows'];
 const DEFAULT_OVERRIDE_PREFIX = false;
-const DEFAULT_GITHUB_ACCOUNT = 'github_account'
-const DEFAULT_AUTHOR_NAME = 'Your Name'
-const DEFAULT_AUTHOR_EMAIL = 'yourname@email.com'
-const DEFAULT_LICENSE = 'Apache-2.0'
+const DEFAULT_GITHUB_ACCOUNT = 'github_account';
+const DEFAULT_AUTHOR_NAME = 'Your Name';
+const DEFAULT_AUTHOR_EMAIL = 'yourname@email.com';
+const DEFAULT_LICENSE = 'Apache-2.0';
 const DEFAULT_GENERATE_EXAMPLE = false;
 
+const renderTemplate = (name, template, templateArgs) => {
+  const filename = path.join(name, template.name(templateArgs));
+  const baseDir = filename.split(path.basename(filename))[0];
+
+  return createFolder(baseDir).then(() =>
+    createFile(filename, template.content(templateArgs))
+  );
+}
+
 module.exports = ({
   namespace,
   name = DEFAULT_NAME,
@@ -58,16 +67,9 @@ module.exports = ({
       identifier, it is recommended to customize the package identifier.`);
   }
 
-  const moduleName = rootFolderName = `${modulePrefix}-${paramCase(name)}`;
+  const moduleName = `${modulePrefix}-${paramCase(name)}`;
+  const rootFolderName = moduleName;
   return createFolder(rootFolderName)
-    .then(() => {
-      if (!generateExample) {
-        return Promise.resolve()
-      }
-      // Note: The example has to be created first because it will fail if there
-      // is already a package.json in the folder in which the command is executed.
-      return execSync('react-native init example', { cwd: './' + rootFolderName, stdio:'inherit'});
-    })
     .then(() => {
       return Promise.all(templates.filter((template) => {
         if (template.platform) {
@@ -79,7 +81,7 @@ module.exports = ({
         if (!template.name) {
           return Promise.resolve();
         }
-        const args = {
+        const templateArgs = {
           name: `${prefix}${pascalCase(name)}`,
           moduleName,
           packageIdentifier,
@@ -89,29 +91,52 @@ module.exports = ({
           authorName,
           authorEmail,
           license,
+          generateExample,
         };
 
-        const filename = path.join(rootFolderName, template.name(args));
-        var baseDir = filename.split(path.basename(filename))[0];
-        
-        return createFolder(baseDir).then(() =>
-          createFile(filename, template.content(args))
-        );
+        return renderTemplate(rootFolderName, template, templateArgs);
       }));
     })
     .then(() => {
+      // Generate the example if necessary
       if (!generateExample) {
         return Promise.resolve();
       }
-      // Adds and links the created library project
-      const pathExampleApp = `./${name}/example`;
-      const options = { cwd: pathExampleApp, stdio:'inherit'};
-      try {
-        execSync('yarn add file:../', options);
-      } catch (e) {
-        execSync('npm install ../', options);
-        execSync('npm install', options);
-      }
-      execSync('react-native link', options);
+
+      const initExampleOptions = { cwd: `./${rootFolderName}`, stdio: 'inherit' };
+      return exec('react-native init example', initExampleOptions)
+        .then(() => {
+          // Execute the example template
+          const exampleTemplates = require('./templates/example');
+          return Promise.all(
+            exampleTemplates.map((template) => {
+              return renderTemplate(rootFolderName, template);
+            })
+          );
+        })
+        .then(() => {
+          // Adds and link the new library
+          return new Promise((resolve, reject) => {
+            // Add postinstall script to example package.json
+            const pathExampleApp = `./${rootFolderName}/example`;
+            const moduleName = `${modulePrefix}-${paramCase(name)}`;
+            npmAddScriptSync(`${pathExampleApp}/package.json`, {
+              key: 'postinstall',
+              value: `node ../scripts/examples_postinstall.js node_modules/${moduleName}`
+            });
+
+            // Add and link the new library
+            const addLinkLibraryOptions = { cwd: pathExampleApp, stdio: 'inherit' };
+            try {
+              execSync('yarn add file:../', addLinkLibraryOptions);
+            } catch (e) {
+              execSync('npm install ../', addLinkLibraryOptions);
+              execSync('npm install', addLinkLibraryOptions);
+            }
+            execSync('react-native link', addLinkLibraryOptions);
+
+            return resolve();
+          });
+        });
     });
 };

package.json

@@ -39,6 +39,7 @@
   "homepage": "https://github.com/frostney/react-native-create-library#readme",
   "dependencies": {
     "commander": "^2.9.0",
+    "jsonfile": "^4.0.0",
     "mkdirp": "^0.5.1",
     "node-emoji": "^1.5.1",
     "param-case": "^2.1.0",

templates/android.js

@@ -1,7 +1,6 @@
 module.exports = platform => [{
   name: () => `${platform}/build.gradle`,
-  content: ({ packageIdentifier }) => `
-buildscript {
+  content: ({ packageIdentifier }) => `buildscript {
     repositories {
         jcenter()
     }
@@ -120,20 +119,18 @@ afterEvaluate { project ->
         }
     }
 }
-  `,
+`,
 }, {
   name: () => `${platform}/src/main/AndroidManifest.xml`,
-  content: ({ packageIdentifier }) => `
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  content: ({ packageIdentifier }) => `<manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="${packageIdentifier}">
 
 </manifest>
-  `,
+`,
 }, {
   name: ({ packageIdentifier, name }) =>
     `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Module.java`,
-  content: ({ packageIdentifier, name }) => `
-package ${packageIdentifier};
+  content: ({ packageIdentifier, name }) => `package ${packageIdentifier};
 
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
@@ -162,8 +159,7 @@ public class ${name}Module extends ReactContextBaseJavaModule {
 }, {
   name: ({ packageIdentifier, name }) =>
     `${platform}/src/main/java/${packageIdentifier.split('.').join('/')}/${name}Package.java`,
-  content: ({ packageIdentifier, name }) => `
-package ${packageIdentifier};
+  content: ({ packageIdentifier, name }) => `package ${packageIdentifier};
 
 import java.util.Arrays;
 import java.util.Collections;
@@ -189,11 +185,11 @@ public class ${name}Package implements ReactPackage {
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
         return Collections.emptyList();
     }
-}`,
+}
+`,
 }, {
   name: () => `${platform}/README.md`,
-  content: () => `
-README
+  content: () => `README
 ======
 
 If you want to publish the lib as a maven dependency, follow these steps before publishing a new version to npm:
@@ -207,4 +203,5 @@ sdk.dir=/Users/{username}/Library/Android/sdk
 3. Delete the \`maven\` folder
 4. Run \`sudo ./gradlew installArchives\`
 5. Verify that latest set of generated files is in the maven folder with the correct version number
-`}];
+`
+}];

templates/example.js

@@ -0,0 +1,112 @@
+/* eslint max-len: 0 */
+
+module.exports = [{
+  name: () => 'scripts/examples_postinstall.js',
+  content: () =>
+`#!/usr/bin/env node
+
+  /*
+   * Using libraries within examples and linking them within packages.json like:
+   * "react-native-library-name": "file:../"
+   * will cause problems with the metro bundler if the example will run via
+   * \`react-native run-[ios|android]\`. This will result in an error as the metro
+   * bundler will find multiple versions for the same module while resolving it.
+   * The reason for that is that if the library is installed it also copies in the
+   * example folder itself as well as the node_modules folder of the library
+   * although their are defined in .npmignore and should be ignored in theory.
+   *
+   * This postinstall script removes the node_modules folder as well as all
+   * entries from the libraries .npmignore file within the examples node_modules
+   * folder after the library was installed. This should resolve the metro
+   * bundler issue mentioned above.
+   *
+   * It is expected this scripts lives in the libraries root folder within a
+   * scripts folder. As first parameter the relative path to the libraries
+   * folder within the examples node_modules folder should be provided.
+   * An example's package.json entry could look like:
+   * "postinstall": "node ../scripts/examples_postinstall.js node_modules/react-native-library-name/"
+   */
+
+  'use strict';
+
+  const fs = require('fs');
+  const path = require('path');
+
+  /// Delete all files and directories for the given path
+  const removeFileDirectoryRecursively = fileDirPath => {
+    // Remove file
+    if (!fs.lstatSync(fileDirPath).isDirectory()) {
+      fs.unlinkSync(fileDirPath);
+      return;
+    }
+
+    // Go down the directory an remove each file / directory recursively
+    fs.readdirSync(fileDirPath).forEach(entry => {
+      const entryPath = path.join(fileDirPath, entry);
+      removeFileDirectoryRecursively(entryPath);
+    });
+    fs.rmdirSync(fileDirPath);
+  };
+
+  /// Remove example/node_modules/react-native-library-name/node_modules directory
+  const removeLibraryNodeModulesPath = (libraryNodeModulesPath) => {
+    const nodeModulesPath = path.resolve(libraryNodeModulesPath, 'node_modules')
+
+    if (!fs.existsSync(nodeModulesPath)) {
+      console.log(\`No node_modules path found at \${nodeModulesPath}. Skipping delete.\`)
+      return;
+    }
+
+    console.log(\`Deleting: \${nodeModulesPath}\`)
+    try {
+      removeFileDirectoryRecursively(nodeModulesPath);
+      console.log(\`Successfully deleted: \${nodeModulesPath}\`)
+    } catch (err) {
+      console.log(\`Error deleting \${nodeModulesPath}: \${err.message}\`);
+    }
+  };
+
+  /// Remove all entries from the .npmignore within  example/node_modules/react-native-library-name/
+  const removeLibraryNpmIgnorePaths = (npmIgnorePath, libraryNodeModulesPath) => {
+    if (!fs.existsSync(npmIgnorePath)) {
+      console.log(\`No .npmignore path found at \${npmIgnorePath}. Skipping deleting content.\`);
+      return;
+    }
+
+    fs.readFileSync(npmIgnorePath, 'utf8').split(/\\r?\\n/).forEach(entry => {
+      if (entry.length === 0) {
+        return
+      }
+
+      const npmIgnoreLibraryNodeModulesEntryPath = path.resolve(libraryNodeModulesPath, entry);
+      if (!fs.existsSync(npmIgnoreLibraryNodeModulesEntryPath)) {
+        return;
+      }
+
+      console.log(\`Deleting: \${npmIgnoreLibraryNodeModulesEntryPath}\`)
+      try {
+        removeFileDirectoryRecursively(npmIgnoreLibraryNodeModulesEntryPath);
+        console.log(\`Successfully deleted: \${npmIgnoreLibraryNodeModulesEntryPath}\`)
+      } catch (err) {
+        console.log(\`Error deleting \${npmIgnoreLibraryNodeModulesEntryPath}: \${err.message}\`);
+      }
+    });
+  };
+
+  // Main start sweeping process
+  (() => {
+    // Read out dir of example project
+    const exampleDir = process.cwd();
+
+    // Relative libraries path within the examples node_modules directory
+    const relativeLibraryNodeModulesPath = process.argv[2];
+    const libraryNodeModulesPath = path.resolve(exampleDir, relativeLibraryNodeModulesPath);
+
+
+    removeLibraryNodeModulesPath(libraryNodeModulesPath);
+
+    const npmIgnorePath = path.resolve(__dirname, '../.npmignore');
+    removeLibraryNpmIgnorePaths(npmIgnorePath, libraryNodeModulesPath);
+  })();
+`
+}];