refactor(source): add padua, update dependencies and switch to ES Module

tobua · tobua · commit b3a3029eebf7 · 2021-04-04T14:44:19.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
-node_modules
-package-lock.json
+node_modules
+package-lock.json
+jsconfig.json
diff --git a/customize.js b/customize.js
@@ -1,5 +1,5 @@
-const { join } = require('path')
-const { readFileSync, writeFileSync } = require('fs-extra')
+import { join } from 'path'
+import { readFileSync, writeFileSync } from 'fs'
 
 const files = [
   'app/App.js',
@@ -9,19 +9,19 @@ const files = [
   '.flowconfig',
   'create-app.js',
   'package.json',
-  'README.md'
+  'README.md',
 ]
 
 // Replace template values with plugin name.
-module.exports = (name, directory) => {
-  const replaceTemplateVariables = file => {
+export default (name, directory) => {
+  const replaceTemplateVariables = (file) => {
     const filePath = join(directory, file)
     let contents = readFileSync(filePath, 'utf-8')
 
     contents = contents.replace(/<%= name %>/g, name.regular)
     contents = contents.replace(/<%= pascal %>/g, name.pascal)
 
-    writeFileSync(filePath, contents, 'utf-8')
+    writeFileSync(filePath, contents)
   }
 
   files.forEach(replaceTemplateVariables)
diff --git a/index.js b/index.js
@@ -1,12 +1,13 @@
 #!/usr/bin/env node
-
-const { resolve } = require('path')
-const { ensureDirSync, emptyDirSync, existsSync, copySync } = require('fs-extra')
-const { execSync } = require('child_process')
-const names = require('./names')
-const customize = require('./customize')
+import { join } from 'path'
+import { existsSync, unlinkSync, rmdirSync, lstatSync, mkdirSync } from 'fs'
+import { copySync } from 'fs-extra'
+import { execSync } from 'child_process'
+import names from './names.js'
+import customize from './customize.js'
 
 const args = process.argv
+
 if (args.length < 3) {
   return console.error('Please provide a name for your plugin.')
 }
@@ -19,24 +20,34 @@ if (existsSync(name.regular)) {
   )
 }
 
-ensureDirSync(name.regular)
-emptyDirSync(name.regular)
+if (existsSync(name.regular)) {
+  if (lstatSync(name.regular).isDirectory()) {
+    rmdirSync(name.regular, { recursive: true })
+  } else {
+    unlinkSync(name.regular)
+  }
+}
 
-const templateDirectory = resolve(__dirname, 'template')
+mkdirSync(name.regular)
 
-const destinationDirectory = resolve(process.cwd(), name.regular)
+const templateDirectory = join(__dirname, 'template')
+const destinationDirectory = join(process.cwd(), name.regular)
 
 copySync(templateDirectory, destinationDirectory)
 
 customize(name, destinationDirectory)
 
 console.log('Installing dependencies...')
 
-execSync('npm i', { cwd: name.regular, stdio : 'pipe' })
+execSync('npm i', { cwd: destinationDirectory, stdio: 'pipe' })
 
 console.log('')
-console.log(`😃 Created new plugin called ${name.regular} in ${destinationDirectory}.`)
+console.log(
+  `😃 Created new plugin called ${name.regular} in ${destinationDirectory}.`
+)
 console.log(`🛠️  Start coding in the file src/index.js.`)
-console.log(`🛠️  To preview the plugin edit app/App.js and create a RN installation with:`)
+console.log(
+  `🛠️  To preview the plugin edit app/App.js and create a RN installation with:`
+)
 console.log(`🐚 cd ${name.regular}`)
 console.log('🐚 npm run app')
diff --git a/names.js b/names.js
@@ -1,11 +1,11 @@
-const { pascalCase } = require('change-case')
+import { pascalCase } from 'change-case'
 
-module.exports = name => {
+export default (name) => {
   // react-native prefix only used to identify package out of RN context.
   const unprefixed = name.replace(/^react-native-/, '')
 
   return {
     regular: name,
-    pascal: pascalCase(unprefixed)
+    pascal: pascalCase(unprefixed),
   }
 }
diff --git a/package.json b/package.json
@@ -1,21 +1,39 @@
 {
   "name": "create-react-native-plugin",
   "description": "Template for creating React Native plugins without native code.",
-  "author": "Matthias Giger",
-  "license": "MIT",
   "version": "1.0.1",
-  "repository": "github:naminho/create-react-native-plugin",
-  "main": "index.js",
-  "bin": {
-    "create-react-native-plugin": "./index.js",
-    "crnp": "./index.js"
+  "repository": "github:tobua/create-react-native-plugin",
+  "license": "MIT",
+  "author": "Matthias Giger",
+  "padua": {
+    "source": true
   },
   "dependencies": {
-    "change-case": "4.1.0",
-    "fs-extra": "8.1.0"
+    "change-case": "4.1.2",
+    "fs-extra": "9.1.0"
+  },
+  "type": "module",
+  "main": "index.js",
+  "sideEffects": false,
+  "bin": "index.js",
+  "source": "index.js",
+  "files": [
+    "**/*.js"
+  ],
+  "devDependencies": {
+    "padua": "^0.3.5"
+  },
+  "prettier": "padua/configuration/.prettierrc.json",
+  "eslintConfig": {
+    "extends": "./node_modules/padua/configuration/eslint.cjs",
+    "rules": {
+      "import/extensions": [
+        2,
+        "ignorePackages"
+      ]
+    }
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true
+  "engines": {
+    "node": ">= 14"
   }
 }
diff --git a/template/README.md b/template/README.md
@@ -37,7 +37,7 @@ To test your plugin on a device run the following to create a React Native app u
 
 ```
 npm install
-npm run app --silent
+npm run app
 cd app
 react-native run-ios / react-native run-android
 ```
diff --git a/template/app/App.js b/template/app/App.js
@@ -1,7 +1,7 @@
 // @flow
-import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import <%= pascal %> from '<%= name %>';
+import React from 'react'
+import { StyleSheet, View, Text } from 'react-native'
+import <%= pascal %> from '<%= name %>'
 
 export default () => (
   <View style={styles.screen}>
@@ -10,7 +10,7 @@ export default () => (
     <<%= pascal %> initialCount={45} />
     <Text style={styles.subtitle}>create-react-native-plugin</Text>
   </View>
-);
+)
 
 const styles = StyleSheet.create({
   screen: {
@@ -26,4 +26,4 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: 15,
   },
-});
+})
diff --git a/template/create-app.js b/template/create-app.js
@@ -1,59 +1,40 @@
 #!/usr/bin/env node
-
-import {join} from 'path';
-import {promisify} from 'util';
-import {exec} from 'child_process';
-import copy from 'recursive-copy';
-import rimraf from 'rimraf';
+import { join } from 'path'
+import { execSync } from 'child_process'
+import copy from 'recursive-copy'
+import rimraf from 'rimraf'
 
 // Enhances source files inside /app with a fresh RN project template.
-(async () => {
-  const appName = 'MyPluginApp';
-  const execute = promisify(exec);
-
-  console.log('Initializing a fresh RN project...');
-  console.log('⌛ This might take some time.');
-
-  // Remove local CLI, as it interferes with the global.
-  rimraf.sync('node_modules/@react-native-community/cli');
-  // Remove existing installation in case it got stuck last time.
-  rimraf.sync(`app/${appName}`);
-
-  const timer = setTimeout(() => {
-    // Warning after 5 minutes in case native dependencies missing for CLI.
-    console.log(
-      "If it's stuck at this point, try creating a RN project elsewhere with 'npx react-native init TestApp' and follow the instructions there before trying this again.",
-    );
-  }, 300000);
-
-  // Initialize RN project.
-  await execute(`npx react-native init ${appName}`, {
-    cwd: 'app',
-  });
-
-  clearTimeout(timer);
-
-  // Copy to destination directory, leaving source files untouched.
-  await copy(`app/${appName}`, 'app', {
-    dot: true,
-    overwrite: false,
-    filter: ['**/*', '!App.js'],
-  });
-
-  // Remove temporary project directory.
-  rimraf.sync(`app/${appName}`);
-
-  // Install this package locally, avoiding symlinks.
-  await execute('npm install $(npm pack .. | tail -1)', {
-    cwd: join(__dirname, 'app'),
-  });
-
-  console.log('');
-  console.log('🍞 React Native App created inside /app.');
-  console.log('🛠️  To run the example with the plugin included:');
-  console.log('🐚 cd app');
-  console.log('🐚 react-native run-ios / react-native run-android');
-  console.log('🌪️  To copy over the changes from the plugin source run:');
-  console.log('🐚 npm run watch');
-  console.log('🛠️  This will copy changes over to the app.');
-})();
+const appName = 'MyPluginApp'
+
+console.log('⌛ Initializing a fresh RN project...')
+
+execSync(`npx react-native init ${appName}`, {
+  // Write output to cnosole.
+  stdio: 'inherit',
+})
+
+// Copy to destination directory, leaving source files untouched.
+await copy(appName, 'app', {
+  dot: true,
+  overwrite: false,
+  filter: ['**/*', '!App.js'],
+})
+
+// Remove temporary project directory.
+rimraf.sync(appName)
+
+// Install this package locally, avoiding symlinks.
+execSync('npm install $(npm pack .. | tail -1)', {
+  cwd: join(process.cwd(), 'app'),
+  stdio: 'inherit',
+})
+
+console.log('')
+console.log('🍞 React Native App created inside /app.')
+console.log('🛠️  To run the example with the plugin included:')
+console.log('🐚 cd app')
+console.log('🐚 react-native run-ios / react-native run-android')
+console.log('🌪️  To copy over the changes from the plugin source run:')
+console.log('🐚 npm run watch')
+console.log('🛠️  This will copy changes over to the app.')
diff --git a/template/package.json b/template/package.json
@@ -4,17 +4,15 @@
   "license": "MIT",
   "main": "src/index.js",
   "scripts": {
-    "app": "babel-node create-app",
+    "app": "node create-app.js",
     "watch": "cpx 'src/**/*' app/node_modules/<%= name %>/src --watch",
     "test": "jest --watchAll",
     "lint": "eslint ./src --fix",
     "format": "prettier \"src/**/*\" --write"
   },
   "prettier": {
-    "bracketSpacing": false,
-    "jsxBracketSameLine": true,
     "singleQuote": true,
-    "trailingComma": "all"
+    "semi": false
   },
   "eslintConfig": {
     "extends": "@react-native-community"
@@ -47,5 +45,8 @@
     "react-test-renderer": "^16.12.0",
     "recursive-copy": "^2.0.10",
     "rimraf": "^3.0.0"
+  },
+  "engines": {
+    "node": ">= 14"
   }
 }
diff --git a/template/src/index.js b/template/src/index.js
diff --git a/template/test/basic.test.js b/template/test/basic.test.js
diff --git a/template/test/docs.test.js b/template/test/docs.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,11 @@`
`1`		`-const { pascalCase } = require('change-case')`
	`1`	`+import { pascalCase } from 'change-case'`
`2`	`2`
`3`		`-module.exports = name => {`
	`3`	`+export default (name) => {`
`4`	`4`	`// react-native prefix only used to identify package out of RN context.`
`5`	`5`	`const unprefixed = name.replace(/^react-native-/, '')`
`6`	`6`
`7`	`7`	`return {`
`8`	`8`	`regular: name,`
`9`		`- pascal: pascalCase(unprefixed)`
	`9`	`+ pascal: pascalCase(unprefixed),`
`10`	`10`	`}`
`11`	`11`	`}`