create-evergreen-app - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

karma.conf.js

@@ -28,2 +28,5 @@ const path = require('path');
       { pattern: './karma-test-shim.js', watched: false }
+      // uncomment these two for Firefox, Edge support
+      // { pattern: './node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js', watched: false },
+      // { pattern: './node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js', watched: false }
     ],
@@ -37,2 +40,3 @@ preprocessors: {
       require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
       require('karma-junit-reporter'),
@@ -51,2 +55,4 @@ require('karma-coverage-istanbul-reporter'),
     autoWatch: shouldWatch,
+    // currently supported by CEA out of the box: Chrome (headless) and Firefox
+    // to add more browsers: http://karma-runner.github.io/3.0/config/browsers.html
     browsers: ['ChromiumHeadlessConfigured'],
@@ -53,0 +59,0 @@ customLaunchers: {

package.json

 {
   "name": "create-evergreen-app",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Create an evergreen web application with no build configuration",
@@ -24,3 +24,3 @@ "license": "MIT",
     "gh-pages": "rimraf ./docs && npm run build && cp -rv ./public/ ./docs",
-    "lint": "eslint *.js src/**/**/*.js",
+    "lint": "eslint \"*.js\" \"./src/**/*.js\"",
     "serve": "npm run build && ws",
@@ -36,4 +36,6 @@ "start": "npm run develop",
     "@babel/preset-env": "^7.1.0",
+    "@webcomponents/webcomponentsjs": "^2.1.3",
     "babel-loader": "^8.0.2",
     "babel-plugin-transform-builtin-classes": "^0.6.1",
+    "cross-spawn": "^6.0.5",
     "css-loader": "^1.0.0",
@@ -46,2 +48,3 @@ "css-to-string-loader": "^0.1.3",
     "file-loader": "^2.0.0",
+    "fs-extra": "^7.0.1",
     "html-webpack-plugin": "^3.2.0",
@@ -54,2 +57,3 @@ "istanbul-instrumenter-loader": "^3.0.1",
     "karma-coverage-istanbul-reporter": "^2.0.4",
+    "karma-firefox-launcher": "^1.1.0",
     "karma-jasmine": "^1.1.2",
@@ -56,0 +60,0 @@ "karma-junit-reporter": "^1.2.0",

README.md

@@ -10,3 +10,3 @@ # create-evergreen-app
 A starter project for getting up and running with an evergreen web application development stack designed by, and for, today's [modern web](https://github.com/ProjectEvergreen/create-evergreen-app/wiki/Browser-Support-Matrix#evergreen-browsers).
-![Create Evergreen App](https://s3.amazonaws.com/uploads.thegreenhouse.io/project-evergreen/create-evergreen-app-github-repo-banner.png)
+![Create Evergreen App](https://s3.amazonaws.com/uploads.thegreenhouse.io/project-evergreen/create-evergreen-app-github-repo-banner-0.4.0.png)
 
@@ -29,7 +29,7 @@ ### Project Goals
 #### Under Development
-This repo and Project Evergreen itself are still young and maturing rapidly.  The Project Evergreen GitHub organization [project tracker](https://github.com/ProjectEvergreen/project-evergreen/projects) captures the high level goals and next steps, with plans to keep adding those lessons learned as features and improvements to this repo. 
+This repo and Project Evergreen itself are still young and maturing rapidly.  The Project Evergreen GitHub organization [project tracker](https://github.com/ProjectEvergreen/project-evergreen/projects) captures the high level goals and next steps, with plans to keep adding those lessons learned as features and improvements to this repo.
 
 Immediate needs for this repo are:
-- Routing 
-- Route based code spliting + Lazy Loading 
+- Routing
+- Route based code spliting + Lazy Loading
 - Opt-in IE11 Support
@@ -40,21 +40,14 @@
 ## Getting Started
-> Installer assumes you have [`git`](https://git-scm.com/) on your system
+Make sure you have a LTS version of [Node.js installed](https://nodejs.org/) and then follow these steps to get up and running:
+```shell
+# 1) Create new evergreen app
+$ npx -D create-evergreen-app my-app
 
-Make sure you have Node.js 8.x [installed](https://nodejs.org/) and then follow these steps to get up and running:
-```shell
-# 1) create a new evergreen app
-$ npx create-evergreen-app my-app
+# 2) Change Directory
 $ cd my-app
 
-# 2) install dependencies
-$ npm install
-
-# or 
-
-$ yarn install
-
 # 3) Start developing!
-$ npm start 
+$ npm start
 
-# or 
+# or
 
@@ -64,6 +57,13 @@ $ yarn start
 
+You can also clone the repo from GitHub
+```shell
+$ git clone https://github.com/ProjectEvergreen/create-evergreen-app.git my-app
+$ cd my-app && npm install # or yarn install
+$ npm start # or yarn start
+```
+
 > 📖 For more documentation and developer guides that cover topics like the build process, browser and device support, creating components, and more, please check out our [wiki](https://github.com/ProjectEvergreen/create-evergreen-app/wiki)!
 
 ## Usage
-To start developing, you can simply go ahead and edit and add files as you need in `src/`.  
+To start developing, you can simply go ahead and edit and add files as you need in `src/`.
 
@@ -117,6 +117,20 @@ > ℹ️ Feel free to edit or delete any content / code related to Create Evergreen App (including README.md) to customize this repo to your own needs.
 #### Performance
-Performance is an important consideration for developing and maintaing any modern web application.  Out of the box, this project uses **webpack**'s [default settings for performance budgets](https://webpack.js.org/configuration/performance/) and will error when its thresholds are exceeded.  
+Performance is an important consideration for developing and maintaing any modern web application.  Out of the box, this project uses **webpack**'s [default settings for performance budgets](https://webpack.js.org/configuration/performance/) and will error when its thresholds are exceeded.
 
 The goal of this project will be to support good code splitting and lazy loading strategies by default to allow apps to scale horizontally as more pages / features / dependencies get added.
 
-To learn more about performance best practices for modern web application development, check out the [wiki](https://github.com/ProjectEvergreen/create-evergreen-app/wiki/Performance).
+To learn more about performance best practices for modern web application development, check out the [wiki](https://github.com/ProjectEvergreen/create-evergreen-app/wiki/Performance).
+
+#### Unit Testing
+For convenience, Create Evergreen App comes with the dependencies needed to run two browsers out of the box
+1. Chrome (headless w/[Puppeteer](https://github.com/GoogleChrome/puppeteer/))
+1. Firefox
+
+**Using Firefox**
+1. Firefox (and other browsers) will likely need Custom Elements and Shadow DOM polyfilled.  To add this polyfill in Karma, uncomment the lines in the `files` array in _karma.conf.js_ related to  `~@webcomponents`.
+1. Add Firefox to the `browsers` array in _karma.conf.js_.
+
+- For information on adding more browsers, see [the Karma docs](http://karma-runner.github.io/3.0/config/browsers.html).
+- For more information on testing in general, see [our wiki!](https://github.com/ProjectEvergreen/create-evergreen-app/wiki).
+
+> Chrome headless is enabled by default since it is the most portable between local and continuous integration environments.

src/app/app.js

@@ -7,3 +7,2 @@ import { html, LitElement } from '@polymer/lit-element';
 class AppComponent extends LitElement {
-
   render() {
@@ -14,13 +13,10 @@ return html`
       </style>
-      
+
       <div>
-
         <section>
           <eve-header></eve-header>
         </section>
-
         <section>
           <eve-home-page></eve-home-page>
         </section>
-
       </div>
@@ -31,2 +27,2 @@ `;
 
-customElements.define('eve-app', AppComponent);
+customElements.define('eve-app', AppComponent);

src/components/header/header.js

@@ -8,3 +8,3 @@ import { html, LitElement } from '@polymer/lit-element';
   render() {
-    return html`      
+    return html`
       <style>
@@ -15,9 +15,6 @@ ${css}
       <header>
-
         <a href="https://projectevergreen.github.io/" title="Project Evergreen home link" style="background-image: url(./${logo})">&nbsp;</a>
-
         <h1>
           <small>Welcome to</small>
           Create&nbsp;Evergreen&nbsp;App!</h1>
-      
       </header>
@@ -24,0 +21,0 @@ `;

src/pages/home/home.js

@@ -13,5 +13,3 @@ import { html, LitElement } from '@polymer/lit-element';
       <div>
-
         <p>To get started, edit <code>src/pages/home/home.js</code>!</p>
-      
       </div>
@@ -18,0 +16,0 @@ `;

tasks/cea-install.js

 #!/usr/bin/env node
 /* eslint no-console: 0 */
 
-const cp = require('child_process');
+const spawn = require('cross-spawn');
+const path = require('path');
+const fs = require('fs-extra');
+const os = require('os');
 
-const TARGET_DIR = process.argv[2]; 
-const CLEANUP_DIRS = ['docs', '.circleci', '.github', '.git', '.npmignore', 'tasks'];
+let TARGET_DIR;
 
@@ -13,19 +15,129 @@ console.log('-------------------------------------------------------');
 
-// overwrite existing directory or not?
-cp.execSync(`rm -rf ${TARGET_DIR}`);
+// Check target application directory/name is included in args
+// remove directory if present, create new target directory
+const checkTargetDir = async appDir => {
+  if (!appDir) {
+    console.error(
+      'Missing Project Directory! Please specifiy the application name e.g. create-evergreen-app my-app'
+    );
+    process.exit(1); // eslint-disable-line no-process-exit
+  }
 
-// clone CEA from github
-cp.execSync(`git clone https://github.com/ProjectEvergreen/create-evergreen-app --branch release ${TARGET_DIR}`);
+  const targetExists = await fs.pathExists(appDir);
 
-// clean up the new repo directory
-CLEANUP_DIRS.forEach((directory) => {
-  cp.execSync(`rm -rf ${TARGET_DIR}/${directory}`);
-});
+  if (targetExists) {
+    // should we warn about this first?
+    await fs.remove(appDir);
+  }
+  await fs.ensureDir(appDir);
+  return appDir;
+};
 
-console.log('-------------------------------------------------------');
-console.log('Success, your project is ready to go!');
-console.log(`Just run: cd ${TARGET_DIR}`);
-console.log('And then: npm install && npm start (or use yarn)');
-console.log('-------------------------------------------------------');
+// Install npm dependencies
+function install() {
+  return new Promise((resolve, reject) => {
+    const command = 'npm';
+    const args = ['install', '--save', '--save-exact', '--loglevel', 'error'];
+    const child = spawn(command, args, { stdio: 'inherit' });
 
-process.exit(); // eslint-disable-line no-process-exit
+    child.on('close', code => {
+      if (code !== 0) {
+        reject({
+          command: `${command} ${args.join(' ')}`
+        });
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+// Create new package.json
+const npmInit = async () => {
+  const templatePkg = require(path.join(__dirname, '..', 'package.json'));
+  const appPkg = {
+    name: TARGET_DIR,
+    version: '0.1.0',
+    private: true
+  };
+
+  appPkg.scripts = templatePkg.scripts;
+  appPkg.dependencies = templatePkg.dependencies;
+  appPkg.devDependencies = templatePkg.devDependencies;
+
+  await fs.writeFileSync(
+    path.join(TARGET_DIR, 'package.json'),
+    JSON.stringify(appPkg, null, 2) + os.EOL
+  );
+};
+
+// Copy template files to target
+const srcInit = async () => {
+  const copyDirs = [
+    'src',
+    '.browserslistrc',
+    '.editorconfig',
+    '.eslintrc',
+    '.gitignore',
+    '.gitattributes',
+    'yarn.lock',
+    'package-lock.json',
+    'babel.config.js',
+    'karma-test-shim.js',
+    'karma.conf.js',
+    'lws.config.js',
+    'postcss.config.js',
+    'README.md',
+    'webpack.config.common.js',
+    'webpack.config.develop.js',
+    'webpack.config.prod.js'
+  ];
+
+  return await Promise.all(
+    copyDirs.map(async directory => {
+      const initDir = path.join(__dirname, '..', directory);
+
+      if (await fs.existsSync(initDir)) {
+        return await fs.copySync(
+          initDir,
+          path.join(TARGET_DIR, directory)
+        );
+      } else {
+        console.error("Directory doesn't exist! :" + initDir);
+        process.exit(1); // eslint-disable-line no-process-exit
+      }
+    })
+  );
+};
+
+const run = async () => {
+  try {
+    console.log('Preparing project directory...');
+    TARGET_DIR = await checkTargetDir(process.argv[2]);
+
+    console.log('Initializing npm dependencies...');
+    npmInit();
+
+    console.log('Copying project files...');
+    await srcInit();
+
+    // change directory to target directory
+    process.chdir(path.resolve(process.cwd(), TARGET_DIR));
+
+    console.log('Installing project dependencies...');
+    await install();
+
+    // success!
+    console.log('-------------------------------------------------------');
+    console.log('Success, your project is ready to go!');
+    console.log(`Just run: cd ${TARGET_DIR}`);
+    console.log('And then launch your project with: npm start');
+    console.log('-------------------------------------------------------');
+  } catch (err) {
+    console.error(err);
+  }
+
+  process.exit(); // eslint-disable-line no-process-exit
+};
+
+run();

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1313908

increased by0.41%

Lines of code

946

increased by13.29%

Number of lines in readme file

131

increased by11.97%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

36

increased by12.5%

Number of package files

37

decreased by-2.63%

Number of low supply chain risk alerts

4

increased by100%

No dependency changes