feat: typescript and babel (#15)

Author: iamturns

.babelrc.js

@@ -1,13 +1,7 @@
 module.exports = {
   presets: [
-    [
-      "@babel/env",
-      {
-        targets: {
-          node: "current",
-        },
-      },
-    ],
+    // Compile to environments listed in .browserslistrc
+    "@babel/env",
     "@babel/typescript",
   ],
   plugins: [

.browserslistrc

@@ -0,0 +1 @@
+maintained node versions

README.md

@@ -1,16 +1,10 @@
 # create-exposed-app
 
-App generator with everything exposed for maximum tweaking.
-
----
-
 Like zero-config? Get out!
 
-Config files are exposed and ready to edit, not hidden away in one-of-those `node_modules` directories.
-
-Scripts are in your face and tweakable, not tucked away behind a black box.
+Generate a flexible starting point for your app, where config files and scripts are in-your-face and ready to adapt to your needs.
 
-Because every app is unique.
+_Because every app is unique._
 
 Go for it:
 
@@ -23,12 +17,9 @@ npm init exposed-app
 ![command structure](docs/assets/demo-structure.png)
 
 - Tools configured with sensible defaults
-  - [Jest](https://jestjs.io/), [ESLint](https://eslint.org/), and more
-  - Optional [TypeScript](https://www.typescriptlang.org/) support
-  - Nothing hidden or abstracted, easy to override and customize
-- Useful `npm run` scripts
-  - `test`, `lint`, `format`, `upgrade`, `reinstall`, and `reset`
-  - Powered by [iamturns-scripts](https://github.com/iamturns/iamturns-scripts)
+  - Powered by [TypeScript](https://www.typescriptlang.org/), [Babel](https://babeljs.io/), [Jest](https://jestjs.io/), [ESLint](https://eslint.org/), and more
+- Useful `npm run` scripts including `test`, `lint`, `format`, `build`, `validate`, `upgrade`, `reinstall`, and `reset`
+  - Powered by [iamturns-scripts](https://github.com/iamturns/iamturns-scripts), [nodemon](https://nodemon.io/), [npm-run-all](https://www.npmjs.com/package/npm-run-all), and more
 - Format (beautify) files
   - Powered by [Prettier](https://prettier.io/), [import-sort](https://github.com/renke/import-sort), [prettier-package-json](https://github.com/cameronhunter/prettier-package-json)
 - CI/CD

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
-  moduleFileExtensions: ["js", "jsx", "json", "ts", "tsx"],
+  moduleFileExtensions: ["js", "ts", "tsx", "json", "jsx"],
   testEnvironment: "node",
   testMatch: [
     "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "create-exposed-app",
-  "description": "App generator with everything exposed for maximum tweaking",
+  "description": "App generator with everything exposed for maximum control",
   "license": "MIT",
   "author": "Matt Turnbull <matt@iamturns.com> (https://iamturns.com)",
   "homepage": "https://github.com/iamturns/create-exposed-app",
@@ -26,6 +26,7 @@
     "build:watch": "onchange 'src/**/*' --initial --kill --delay 1000  -- npm run build",
     "dev": "nodemon --ext js,jsx,ts,tsx --delay 1 --exec npm run dev:onchange",
     "dev:onchange": "babel-node --extensions .js,.jsx,.ts,.tsx src/create-exposed-app.ts",
+    "display-browser-support": "browserslist --stats && echo '' && browserslist --coverage && echo '' && echo 'See more at https://browserl.ist/'",
     "format": "run-s format:developing format:package format:imports format:prettier format:eslint",
     "format:developing": "doctoc --maxlevel 3 --notitle ./DEVELOPING.md",
     "format:eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx --fix ./ >/dev/null 2>&1 || true",
@@ -71,7 +72,9 @@
     "@types/debug": "0.0.31",
     "@types/ejs": "^2.6.1",
     "@types/inquirer": "0.0.43",
+    "@types/jest": "^23.3.13",
     "babel-jest": "^23.6.0",
+    "browserslist": "^4.4.1",
     "doctoc": "^1.3.1",
     "eslint-config-iamturns": "^1.0.0",
     "eslint-plugin-typescript": "^0.14.0",

package.json

@@ -10,30 +10,61 @@ export interface CopyOperation {
 const templateSuffix = ".template"
 
 const removeTemplateSuffix = (filePath: string): string =>
-  filePath.substr(0, filePath.length - ".template".length)
+  filePath.endsWith(templateSuffix)
+    ? filePath.substr(0, filePath.length - templateSuffix.length)
+    : filePath
 
-const toDestinationPath = (templatePath: string): string =>
-  templatePath.endsWith(templateSuffix)
-    ? removeTemplateSuffix(templatePath)
-    : templatePath
+const replaceFilepathVariable = (
+  filePath: string,
+  key: string,
+  value: string,
+): string => filePath.replace(`{${key}}`, value)
+
+const replaceFilepathViewData = (
+  filePath: string,
+  viewData: Record<string, string>,
+) =>
+  Object.entries(viewData).reduce(
+    (filePathProcessed, viewDataItem) =>
+      replaceFilepathVariable(
+        filePathProcessed,
+        viewDataItem[0],
+        viewDataItem[1],
+      ),
+    filePath,
+  )
+
+const toDestinationPath = (
+  templatePath: string,
+  viewData: Record<string, string>,
+): string => {
+  const noSuffix = removeTemplateSuffix(templatePath)
+  const withViewData = replaceFilepathViewData(noSuffix, viewData)
+  return withViewData
+}
 
 const onCopyComplete = (copyOperation: CopyOperation) =>
   debug("Copied %s", copyOperation.dest)
 
 const onCopyError = (copyOperation: CopyOperation) =>
   logError(copyOperation.dest)
 
-const recuriveCopyOptions = {
-  overwrite: true,
-  dot: true,
-  rename: (filePath: string) => {
-    const destinationPath = toDestinationPath(filePath)
-    debug("Filepath %s to %s", filePath, destinationPath)
-    return destinationPath
-  },
-}
+export const copy = (
+  sourcePath: string,
+  destPath: string,
+  viewData: Record<string, string>,
+): CopyOperation[] => {
+  const recuriveCopyOptions = {
+    overwrite: true,
+    dot: true,
+    rename: (filePath: string) => {
+      const destinationPath = toDestinationPath(filePath, viewData)
+      debug("Copy %s to %s", filePath, destinationPath)
+      return destinationPath
+    },
+  }
 
-export const copy = (sourcePath: string, destPath: string): CopyOperation[] =>
-  recursiveCopy(sourcePath, destPath, recuriveCopyOptions)
+  return recursiveCopy(sourcePath, destPath, recuriveCopyOptions)
     .on(recursiveCopy.events.COPY_FILE_COMPLETE, onCopyComplete)
     .on(recursiveCopy.events.ERROR, onCopyError)
+}

src/create-app/copy.ts

@@ -9,15 +9,18 @@ import { askSetupQuestions, askSetupSemanticRelease } from "./ask"
 import { CopyOperation, copy } from "./copy"
 import { setupGit } from "./git"
 
-const templatesPath = path.resolve(__dirname, "..", "templates")
+const templatesPath = path.resolve(__dirname, "..", "..", "templates")
 debug("Templates path: %s", templatesPath)
 
 const destinationPath = process.cwd()
 debug("Destination path: %s", destinationPath)
 
-const doCopy = async (templatePath: string): Promise<CopyOperation[]> => {
+const doCopy = async (
+  templatePath: string,
+  viewData: Record<string, string>,
+): Promise<CopyOperation[]> => {
   try {
-    const copyResults = await copy(templatePath, destinationPath)
+    const copyResults = await copy(templatePath, destinationPath, viewData)
     logMessage(`${copyResults.length} file(s) copied`)
     return copyResults
   } catch (e) {
@@ -44,7 +47,7 @@ const copyAndRender = async (
   templatePath: string,
   viewData: Record<string, string>,
 ) => {
-  const copyResults = await doCopy(templatePath)
+  const copyResults = await doCopy(templatePath, viewData)
   const filePaths = getFilePaths(copyResults)
   const renderViews = filePaths.map(filePath => renderView(filePath, viewData))
   await Promise.all(renderViews)
@@ -59,10 +62,7 @@ export const createApp = async () => {
   const baseTemplatePath = path.resolve(templatesPath, "1-base")
   await copyAndRender(baseTemplatePath, setupAnswers)
 
-  if (setupAnswers.side === "server") {
-    const serverSideTemplatePath = path.resolve(templatesPath, "2-server-side")
-    await copyAndRender(serverSideTemplatePath, setupAnswers)
-  } else if (setupAnswers.side === "client") {
+  if (setupAnswers.side === "client") {
     const clientSideTemplatePath = path.resolve(templatesPath, "2-client-side")
     await copyAndRender(clientSideTemplatePath, setupAnswers)
   }