Merge pull request #314 from 11ty/js-tmpl

Arbitrary JavaScript Template Types

CODE_OF_CONDUCT.md

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 

cmd.js

@@ -37,7 +37,7 @@ try {
   cmdCheck.hasUnknownArguments();
 
   let elev = new Eleventy(argv.input, argv.output);
-  elev.setConfigPath(argv.config);
+  elev.setConfigPathOverride(argv.config);
   elev.setPathPrefix(argv.pathprefix);
   elev.setDryRun(argv.dryrun);
   elev.setPassthroughAll(argv.passthroughall);

config.js

@@ -16,7 +16,8 @@ module.exports = function(config) {
       "pug",
       "njk",
       "html",
-      "jstl"
+      "jstl",
+      "11ty.js"
     ],
     // if your site lives in a subdirectory, change this
     pathPrefix: "/",

package.json

@@ -36,9 +36,7 @@
   "scripts": {
     "default": "cd playground && npx eleventy --input=. --output=_site",
     "test": "npx nyc ava",
-    "coverage": "npm run test && npx nyc report --reporter=json-summary && cp coverage/coverage-summary.json docs-src/_data/coverage.json && node cmd.js --config=docs-src/.eleventy.docs.js",
-    "precommit": "lint-staged",
-    "prepush": "npx ava"
+    "coverage": "npm run test && npx nyc report --reporter=json-summary && cp coverage/coverage-summary.json docs-src/_data/coverage.json && node cmd.js --config=docs-src/.eleventy.docs.js"
   },
   "author": {
     "name": "Zach Leatherman",
@@ -53,9 +51,10 @@
     "files": [
       "test/*.js"
     ],
-    "source": [
+    "sources": [
       "**/.eleventyignore",
-      "src/**/*.js"
+      "src/**/*.js",
+      "test/stubs/**"
     ]
   },
   "lint-staged": {
@@ -65,22 +64,26 @@
     ]
   },
   "devDependencies": {
-    "ava": "^0.25.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.0",
+    "ava": "^1.0.1",
     "husky": "^1.0.1",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^8.1.0",
     "markdown-it-emoji": "^1.4.0",
     "nyc": "^13.0.1",
-    "prettier": "1.14.3",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.0"
+    "prettier": "^1.15.3",
+    "viperhtml": "^2.12.0",
+    "vue": "^2.5.16",
+    "vue-server-renderer": "^2.5.16"
   },
   "dependencies": {
     "browser-sync": "^2.24.7",
     "chalk": "^2.4.1",
+    "chokidar": "^2.0.4",
     "debug": "^4.0.1",
+    "dependency-tree": "^6.3.0",
     "ejs": "^2.6.1",
     "fast-glob": "^2.2.2",
     "fs-extra": "^7.0.0",
-    "glob-watcher": "^5.0.1",
     "gray-matter": "^4.0.1",
     "hamljs": "^0.6.2",
     "handlebars": "^4.0.12",
@@ -90,6 +93,7 @@
     "luxon": "^1.4.1",
     "markdown-it": "^8.4.2",
     "minimist": "^1.2.0",
+    "moo": "^0.5.0",
     "multimatch": "^2.1.0",
     "mustache": "^2.3.0",
     "normalize-path": "^3.0.0",
@@ -103,5 +107,11 @@
     "slugify": "^1.3.1",
     "time-require": "^0.1.2",
     "valid-url": "^1.0.9"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "npx ava"
+    }
   }
 }

src/Eleventy.js

@@ -3,6 +3,7 @@ const TemplateData = require("./TemplateData");
 const TemplateWriter = require("./TemplateWriter");
 const EleventyErrorHandler = require("./EleventyErrorHandler");
 const EleventyServe = require("./EleventyServe");
+const EleventyWatchTargets = require("./EleventyWatchTargets");
 const EleventyFiles = require("./EleventyFiles");
 const templateCache = require("./TemplateCache");
 const simplePlural = require("./Util/Pluralize");
@@ -23,6 +24,10 @@ function Eleventy(input, output) {
 
   this.rawInput = input;
   this.rawOutput = output;
+
+  this.watchTargets = new EleventyWatchTargets();
+  this.watchTargets.watchJavaScriptDependencies = this.config.watchJavaScriptDependencies;
+
   this.initDirs();
 }
 
@@ -49,7 +54,11 @@ Eleventy.prototype.setPathPrefix = function(pathPrefix) {
   }
 };
 
-Eleventy.prototype.setConfigPath = function(configPath) {
+Eleventy.prototype.setWatchTargets = function(watchTargets) {
+  this.watchTargets = watchTargets;
+};
+
+Eleventy.prototype.setConfigPathOverride = function(configPath) {
   if (configPath) {
     this.configPath = configPath;
 
@@ -131,6 +140,7 @@ Eleventy.prototype.init = async function() {
     formats,
     this.isPassthroughAll
   );
+  this.eleventyFiles.init();
 
   this.templateData = new TemplateData(this.inputDir);
   this.eleventyFiles.setTemplateData(this.templateData);
@@ -235,8 +245,16 @@ Eleventy.prototype._watch = async function(path) {
   config.resetOnWatch();
 
   await this.restart();
+  this.watchTargets.clearDependencyRequireCache();
+
   await this.write();
 
+  this.watchTargets.reset();
+  await this._initWatchDependencies();
+
+  // Add new deps to chokidar
+  this.watcher.add(this.watchTargets.getNewTargetsSinceLastReset());
+
   let isInclude =
     path && TemplatePath.contains(path, this.eleventyFiles.getIncludesDir());
   this.eleventyServe.reload(path, isInclude);
@@ -252,27 +270,87 @@ Eleventy.prototype._watch = async function(path) {
   }
 };
 
+Eleventy.prototype.getWatcher = function() {
+  return this.watcher;
+};
+
+Eleventy.prototype.initWatch = async function() {
+  this.watchTargets.add(this.eleventyFiles.getGlobWatcherFiles());
+
+  // Watch the local project config file
+  this.watchTargets.add(config.getLocalProjectConfigFile());
+
+  // Template and Directory Data Files
+  this.watchTargets.add(
+    await this.eleventyFiles.getGlobWatcherTemplateDataFiles()
+  );
+
+  await this._initWatchDependencies();
+};
+
+Eleventy.prototype._initWatchDependencies = async function() {
+  if (!this.watchTargets.watchJavaScriptDependencies) {
+    return;
+  }
+
+  let dataDir = this.templateData.getDataDir();
+  function filterOutGlobalDataFiles(path) {
+    return !dataDir || path.indexOf(dataDir) === -1;
+  }
+
+  // Template files .11ty.js
+  this.watchTargets.addDependencies(this.eleventyFiles.getWatchPathCache());
+
+  // Config file dependencies
+  this.watchTargets.addDependencies(
+    config.getLocalProjectConfigFile(),
+    filterOutGlobalDataFiles.bind(this)
+  );
+
+  // Deps from Global Data (that aren’t in the global data directory, everything is watched there)
+  this.watchTargets.addDependencies(
+    this.templateData.getWatchPathCache(),
+    filterOutGlobalDataFiles.bind(this)
+  );
+
+  this.watchTargets.addDependencies(
+    await this.eleventyFiles.getWatcherTemplateJavaScriptDataFiles()
+  );
+};
+
+Eleventy.prototype.getWatchedFiles = async function() {
+  return this.watchTargets.getTargets();
+};
+
 Eleventy.prototype.watch = async function() {
+  const chokidar = require("chokidar");
+  const EleventyWatchTargets = require("./EleventyWatchTargets");
+
   this.active = false;
   this.queuedToRun = false;
 
+  // Note that watching indirectly depends on this for fetching dependencies from JS files
+  // See: TemplateWriter:pathCache and EleventyWatchTargets
   await this.write();
 
-  const watch = require("glob-watcher");
+  await this.initWatch();
 
-  let rawFiles = this.eleventyFiles.getGlobWatcherFiles();
-  // Watch the local project config file
-  rawFiles.push(config.getLocalProjectConfigFile());
-  rawFiles = rawFiles.concat(
-    await this.eleventyFiles.getGlobWatcherTemplateDataFiles()
-  );
+  // TODO improve unwatching if JS dependencies are removed (or files are deleted)
+  let rawFiles = await this.getWatchedFiles();
   debug("Watching for changes to: %o", rawFiles);
 
-  console.log("Watching…");
-  let watcher = watch(rawFiles, {
-    ignored: this.eleventyFiles.getGlobWatcherIgnores()
+  let ignores = this.eleventyFiles.getGlobWatcherIgnores();
+  debug("Watching but ignoring changes to: %o", ignores);
+
+  let watcher = chokidar.watch(rawFiles, {
+    ignored: ignores,
+    ignoreInitial: true
   });
 
+  console.log("Watching…");
+
+  this.watcher = watcher;
+
   async function watchRun(path) {
     try {
       await this._watch(path);
@@ -291,6 +369,16 @@ Eleventy.prototype.watch = async function() {
     console.log("File added:", path);
     await watchRun.call(this, path);
   });
+
+  process.on(
+    "SIGINT",
+    function() {
+      debug("Cleaning up chokidar and browsersync (if exists) instances.");
+      this.eleventyServe.close();
+      this.watcher.close();
+      process.exit();
+    }.bind(this)
+  );
 };
 
 Eleventy.prototype.serve = function(port) {