Compiler plugins

.travis.yml

@@ -6,6 +6,7 @@ node_js:
   - "9"
 
 env:
+  - PACKAGE=idyll-ast
   - PACKAGE=idyll-compiler
   - PACKAGE=idyll-components
   - PACKAGE=idyll-cli

appveyor.yml

@@ -28,6 +28,7 @@ test_script:
   # Output useful info for debugging.
   - node --version
   - npm --version
+  - cd packages/idyll-ast && npm run test && cd ../..
   - cd packages/idyll-cli && npm run test && cd ../..
   - cd packages/idyll-compiler && npm run test && cd ../..
   - cd packages/idyll-components && npm run test && cd ../..

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "postinstall": "cd packages/idyll-compiler && npm run build && cd ../idyll-components && npm run build && cd ../idyll-document && npm run build && cd ../idyll-layouts && npm run build && cd ../idyll-themes && npm run build"
+    "postinstall": "cd packages/idyll-compiler && npm run build && cd ../idyll-components && npm run build && cd ../idyll-document && npm run build && cd ../idyll-layouts && npm run build && cd ../idyll-themes && npm run build && cd ../idyll-ast && npm run build"
   },
   "devDependencies": {
     "lerna": "^2.0.0"

packages/idyll-ast/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "./.babelrc.js" ]
+}

packages/idyll-ast/.babelrc.js

@@ -0,0 +1,14 @@
+const { BABEL_ENV, NODE_ENV } = process.env;
+
+module.exports = {
+  plugins: ['transform-object-rest-spread'],
+  presets: [
+    [
+      'env',
+      {
+        loose: true,
+        modules: BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
+  ],
+};

packages/idyll-ast/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/idyll-ast/.npmignore

@@ -0,0 +1 @@
+test/

packages/idyll-ast/.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - "6"
+  - "7"
+install:
+  - npm install

packages/idyll-ast/README.md

@@ -0,0 +1,63 @@
+
+# idyll-ast
+
+Utilities for dealing with Idyll AST. This is most likely useful in the context of compiler plugins.
+
+## Installation
+
+```
+npm install --save idyll-ast
+```
+
+## Usage
+
+
+```js
+const ast = require('idyll-ast');
+const compile = require('idyll-compiler');
+
+compile(`
+ # idyll markup goes here
+`)
+.then((ast) => {
+  const transformedAST = ast.modifyNodesByName(inputAST, 'h1', (node) => {
+    node = ast.setProperty(node, 'className', 'super-great-header');
+    return node;
+  })
+})
+
+```
+
+### Plugin Example
+
+This plugin just appends a new node at the end of the input:
+
+```js
+const ast = require('idyll-ast');
+
+module.exports = (inputAST) => {
+  return ast.appendNodes(inputAST, []);
+};
+
+
+```
+
+## API
+
+* `appendNode(ast, newNode)`
+* `appendNodes(ast, newNodes)`
+* `createNode(name, props, children)`
+* `getChildren(node)`
+* `getNodesByName(ast, 'name')`
+* `filterChildren(node, filterFunction)`
+* `filterNodes(ast, filterFunction)`
+* `modifyChildren(node, modFunction)`
+* `modifyNodesByName(ast, 'name', modFunction)`
+* `getProperty(node, 'propName')`
+* `prependNode(ast, newNode)`
+* `prependNodes(ast, newNodes)`
+* `removeNodesByName(ast, 'name')`
+* `setProperties(node, { prop1: value, prop2: value })`
+* `setProperty(node, 'prop', value)`
+* `removeProperty(node, 'prop')`
+

packages/idyll-ast/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "idyll-ast",
+  "version": "1.0.0",
+  "description": "Utilities for manipulating Idyll's AST",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src -d dist/cjs",
+    "build:es": "cross-env BABEL_ENV=es babel src -d dist/es",
+    "build": "npm run build:es && npm run build:cjs",
+    "test": "mocha",
+    "prepublish": "npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/idyll-lang/idyll.git"
+  },
+  "keywords": [
+    "idyll",
+    "ast"
+  ],
+  "author": "Matthew Conlen",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/idyll-lang/idyll/issues"
+  },
+  "homepage": "https://github.com/idyll-lang/idyll#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "cross-env": "^5.0.5",
+    "expect.js": "^0.3.1",
+    "mocha": "^3.2.0",
+    "rimraf": "^2.6.2"
+  },
+  "dependencies": {
+  }
+}

packages/idyll-compiler/src/ast.js → packages/idyll-ast/src/index.js

@@ -17,10 +17,20 @@
 */
 
 
+const appendNode = function(ast, node) {
+  return appendNodes(ast, [node]);
+};
+
 const appendNodes = function(ast, nodes) {
   return [].concat(ast, nodes);
 };
 
+const createNode = function(name, props, children) {
+  let node = [name, [], children || []];
+  node = setProperties(node, props || {});
+  return node;
+};
+
 const getChildren = function(node) {
   return node[2] || [];
 };
@@ -101,6 +111,10 @@ const getProperty = function(node, key) {
   });
 };
 
+const prependNode = function(ast, node) {
+  return prependNodes(ast, [node]);
+};
+
 const prependNodes = function(ast, nodes) {
   return [].concat(nodes, ast);
 };
@@ -119,13 +133,16 @@ const removeNodesByName = function(ast, name) {
 
 const setProperty = function(node, key, value) {
   let hasSet = false;
-  node[1].forEach((element) => {
+  const isArr = Array.isArray(value);
+  node[1] = node[1].map((element) => {
       if (element[0] === key) {
         hasSet = true;
+        return [element[0], isArr ? value : ['value', value]];
       }
+      return element;
   });
   if (!hasSet) {
-    node[1] = node[1].concat([[key, value]]);
+    node[1] = node[1].concat([[key, isArr ? value : ['value', value]]]);
   }
 
   return node;
@@ -149,14 +166,17 @@ const removeProperty = function(node, key) {
 };
 
 module.exports = {
+  appendNode,
   appendNodes,
+  createNode,
   getChildren,
   getNodesByName,
   filterChildren,
   filterNodes,
   modifyChildren,
   modifyNodesByName,
   getProperty,
+  prependNode,
   prependNodes,
   removeNodesByName,
   setProperties,

packages/idyll-ast/test/test.js

@@ -0,0 +1,10 @@
+
+var expect = require('expect.js');
+var ast = require('../src');
+
+describe('sanity check', function() {
+  it('should not blow up', function() {
+    const input = [['div', [], []]];
+    expect(ast.getNodesByName(input, 'div')).to.eql([['div', [], []]]);
+  });
+});

packages/idyll-cli/src/index.js

@@ -31,7 +31,7 @@ const idyll = (options = {}, cb) => {
         '_index.html'
       ),
       transform: [],
-      compilerOptions: {
+      compiler: {
       },
     },
     options
@@ -44,7 +44,8 @@ const idyll = (options = {}, cb) => {
   const inputPackage = fs.existsSync(paths.PACKAGE_FILE) ? require(paths.PACKAGE_FILE) : {};
   const inputConfig = Object.assign({
     components: {},
-    transform: []
+    transform: [],
+    compiler: {}
   }, inputPackage.idyll || {});
   for (let key in inputConfig.components) {
     inputConfig.components[changeCase.paramCase(key)] = inputConfig.components[key];
@@ -53,6 +54,19 @@ const idyll = (options = {}, cb) => {
 
   // Handle options that can be provided via options or via package.json
   opts.transform = options.transform || inputConfig.transform || opts.transform;
+  opts.compiler = options.compiler || inputConfig.compiler || opts.compiler;
+
+  // Resolve compiler plugins:
+  if (opts.compiler.postProcessors) {
+    opts.compiler.postProcessors = opts.compiler.postProcessors.map((processor) => {
+      try {
+        return require(processor, { basedir: paths.INPUT_DIR });
+      } catch(e) {
+        console.log(e);
+        console.warn('\n\nCould not find post-processor plugin: ', processor);
+      }
+    })
+  }
 
   let bs;
 

packages/idyll-cli/src/pipeline/index.js

@@ -22,63 +22,65 @@ const build = (opts, paths, inputConfig) => {
     opts.inputString = fs.readFileSync(paths.IDYLL_INPUT_FILE, 'utf8');
   }
 
-  return Promise.try(
-    // this is all synchronous so we wrap it with Promise.try
-    // to start a Promise chain and turn any synchronous exceptions into a rejection
-    () => {
-      const ast = compile(opts.inputString, opts.compilerOptions);
-      const template = fs.readFileSync(paths.HTML_TEMPLATE_FILE, 'utf8');
+  return compile(opts.inputString, opts.compiler || opts.compilerOptions)
+    .then((ast) => {
+      return Promise.try(
+        () => {
+          // opts.compilerOptions is kept for backwards compatability
+          const template = fs.readFileSync(paths.HTML_TEMPLATE_FILE, 'utf8');
 
-      output = {
-        ast: getASTJSON(ast),
-        components: getComponentsJS(ast, paths, inputConfig),
-        css: css(opts),
-        data: getDataJS(ast, paths.DATA_DIR),
-        syntaxHighlighting: getHighlightJS(ast, paths),
-        opts: {
-          ssr: opts.ssr,
-          theme: opts.theme,
-          layout: opts.layout
-        }
-      };
-      if (!opts.ssr) {
-        output.html = getBaseHTML(ast, template);
-      } else {
-        output.html = getHTML(
-          paths,
-          ast,
-          output.components,
-          output.data,
-          template,
-          {
-            ssr: opts.ssr,
-            theme: opts.theme,
-            layout: opts.layout
+          output = {
+            ast: getASTJSON(ast),
+            components: getComponentsJS(ast, paths, inputConfig),
+            css: css(opts),
+            data: getDataJS(ast, paths.DATA_DIR),
+            syntaxHighlighting: getHighlightJS(ast, paths),
+            opts: {
+              ssr: opts.ssr,
+              theme: opts.theme,
+              layout: opts.layout
+            }
+          };
+          if (!opts.ssr) {
+            output.html = getBaseHTML(ast, template);
+          } else {
+            output.html = getHTML(
+              paths,
+              ast,
+              output.components,
+              output.data,
+              template,
+              {
+                ssr: opts.ssr,
+                theme: opts.theme,
+                layout: opts.layout
+              }
+            );
           }
-        );
+        }
+      )
+
+    })
+    .then(() => {
+      return bundleJS(opts, paths, output); // create index.js bundle
+    })
+    .then((js) => {
+      // minify bundle if necessary and store it
+      if (opts.minify) {
+        js = UglifyJS.minify(js, {fromString: true, mangle: { keep_fnames: true}}).code;
       }
-    }
-  )
-  .then(() => {
-    return bundleJS(opts, paths, output); // create index.js bundle
-  })
-  .then((js) => {
-    // minify bundle if necessary and store it
-    if (opts.minify) {
-      js = UglifyJS.minify(js, {fromString: true, mangle: { keep_fnames: true}}).code;
-    }
-    output.js = js;
-  })
-  .then(() => {
-    return Promise.all([
-      writeFile(paths.JS_OUTPUT_FILE, output.js),
-      writeFile(paths.CSS_OUTPUT_FILE, output.css),
-      writeFile(paths.HTML_OUTPUT_FILE, output.html),
-    ]);
-  })
-  .then(() => {
-    return output; // return all results
-  });
+      output.js = js;
+    })
+    .then(() => {
+      return Promise.all([
+        writeFile(paths.JS_OUTPUT_FILE, output.js),
+        writeFile(paths.CSS_OUTPUT_FILE, output.css),
+        writeFile(paths.HTML_OUTPUT_FILE, output.html),
+      ]);
+    })
+    .then(() => {
+      return output; // return all results
+    });
 }
 
 const updateCSS = (opts, paths) => {