Added prettier-plugin for inline hbs

Author: Matthew Edwards

.prettierignore

@@ -1 +1,2 @@
-packages/@glimmerx/babel-plugin-component-templates/test/
+packages/@glimmerx/babel-plugin-component-templates/test/
+packages/@glimmerx/@glimmerx/prettier-plugin-component-templates/test/fixtures/

package.json

@@ -54,7 +54,7 @@
     "eslint-plugin-prettier": "^3.1.2",
     "fs-extra": "^9.0.0",
     "lerna": "^3.20.2",
-    "prettier": "^2.0.4",
+    "prettier": "^2.3.0",
     "qunit": "^2.9.3",
     "release-it": "^13.5.1",
     "release-it-lerna-changelog": "^2.1.2",

packages/@glimmerx/prettier-plugin-component-templates/.prettierignore

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

packages/@glimmerx/prettier-plugin-component-templates/README.md

@@ -0,0 +1,47 @@
+# prettier-plugin-glimmer-experimental
+
+## Background
+
+[Prettier](https://prettier.io/docs/en/index.html) is an opinionated code formatter. In Prettier `>2.0` there is support for `*.hbs` glimmer files, but does not support the experimental syntaxes that `glimmerx` components are authored in.
+
+## Introduction
+
+This plugin extends the internal printers to add an embedded syntax for glimmer template in an `hbs` TaggedTemplateExpressions.
+
+## Installation and Usage
+
+```bash
+yarn add -D @glimmerx/prettier-plugin-component-templates
+```
+
+Once added prettier will discover and use the plugin to format any `hbs` tagged template expression.
+
+## Development
+
+Generate a test case, add it to the tests file,
+
+- Add `PRETTIER_DEBUG=true` to the environment when running the plugin in order to get complete stack traces on errors.
+- To generate a new output file you can:
+  ```
+  yarn prettier --plugin ./index.js ./test/fixtures/extension-gjs/code.gjs > ./test/fixtures/extension-gjs/output.gjs
+  ```
+
+### Testing
+
+Run all tests:
+
+```
+yarn test
+```
+
+Using the plugin on a single fixture file:
+
+```
+PRETTIER_DEBUG=true --inspect-brk node node_modules/.bin/prettier --plugin ./index.js ./test/fixtures/extension-gjs/code.gjs
+```
+
+Some caveats, the `.prettierignore` file will be respected, so please ensure that is commented out in repo root.
+
+## TODO
+
+- [ ] Add support for `<template>` tag semantics.

packages/@glimmerx/prettier-plugin-component-templates/index.js

@@ -0,0 +1,142 @@
+const babelParsers = require('prettier/parser-babel').parsers;
+const typescriptParsers = require('prettier/parser-typescript').parsers;
+
+const { esTree } = require('./lib/util');
+
+const {
+  builders: { group, indent, softline, concat, hardline },
+  utils: { mapDoc, stripTrailingHardline },
+} = require('prettier').doc;
+
+const comments = require('./lib/comments');
+
+function formatHbs(path, print, textToDoc, options) {
+  const node = path.getValue();
+
+  const placeholderPattern = 'PRETTIER_HTML_PLACEHOLDER_(\\d+)_IN_JS';
+  const placeholders = node.expressions.map((_, i) => `PRETTIER_HTML_PLACEHOLDER_${i}_IN_JS`);
+
+  const text = node.quasis
+    .map((quasi, index, quasis) =>
+      index === quasis.length - 1 ? quasi.value.raw : quasi.value.raw + placeholders[index]
+    )
+    .join('');
+
+  const expressionDocs = path.map(print, 'expressions');
+
+  if (expressionDocs.length === 0 && text.trim().length === 0) {
+    return '``';
+  }
+
+  const contentDoc = mapDoc(
+    stripTrailingHardline(textToDoc(text, { parser: 'glimmer' })),
+    (doc) => {
+      const placeholderRegex = new RegExp(placeholderPattern, 'g');
+      const hasPlaceholder = typeof doc === 'string' && placeholderRegex.test(doc);
+
+      if (!hasPlaceholder) {
+        return doc;
+      }
+
+      let parts = [];
+
+      const components = doc.split(placeholderRegex);
+      for (let i = 0; i < components.length; i++) {
+        const component = components[i];
+
+        if (i % 2 === 0) {
+          if (component) {
+            parts.push(component);
+          }
+          continue;
+        }
+
+        const placeholderIndex = +component;
+
+        parts.push(
+          concat([
+            '${',
+            group(concat([indent(concat([softline, expressionDocs[placeholderIndex]])), softline])),
+            '}',
+          ])
+        );
+      }
+
+      return concat(parts);
+    }
+  );
+
+  return group(concat(['`', indent(concat([hardline, group(contentDoc)])), softline, '`']));
+}
+
+function isHbs(path) {
+  return path.match(
+    (node) => {
+      return node.type === 'TemplateLiteral';
+    },
+    (node, name) => {
+      return (
+        node.type === 'TaggedTemplateExpression' &&
+        node.tag.type === 'Identifier' &&
+        node.tag.name === 'hbs' &&
+        name === 'quasi'
+      );
+    }
+  );
+}
+
+function embed(path, print, textToDoc, options) {
+  if (isHbs(path)) {
+    return formatHbs(path, print, textToDoc, options);
+  }
+
+  return esTree(options).embed(path, print, textToDoc, options);
+}
+
+function print(path, options, print) {
+  return esTree(options).print(path, options, print);
+}
+
+const languages = [
+  {
+    name: 'glimmer-experimental',
+    group: 'JavaScript',
+    parsers: ['babel', 'babel-ts', 'typescript'], // Which parsers do we want to support?
+    extensions: ['.gjs', '.js', '.ts'],
+    vscodeLanguageIds: ['javascript'],
+  },
+];
+
+const parsers = {
+  babel: {
+    ...babelParsers.babel,
+    astFormat: 'esTree',
+    parse(text, parsers, options) {
+      const ast = babelParsers.babel.parse(text, parsers, options);
+      return ast;
+    },
+  },
+  // babel-ts?
+  typescript: {
+    ...typescriptParsers.typescript,
+    astFormat: 'esTree',
+    parse(text, parsers, options) {
+      const ast = typescriptParsers.typescript.parse(text, parsers, options);
+      return ast;
+    },
+  },
+};
+
+const printers = {
+  esTree: {
+    embed,
+    print,
+    ...comments,
+  },
+};
+
+module.exports = {
+  languages,
+  parsers,
+  printers,
+};

packages/@glimmerx/prettier-plugin-component-templates/lib/comments.js

@@ -0,0 +1,77 @@
+const { esTree } = require('./util');
+
+function canAttachComment(node) {
+  return (
+    node.type &&
+    !isBlockComment(node) &&
+    !isLineComment(node) &&
+    node.type !== 'EmptyStatement' &&
+    node.type !== 'TemplateElement' &&
+    node.type !== 'Import' &&
+    // `babel-ts` don't have similar node for `class Foo { bar() /* bat */; }`
+    node.type !== 'TSEmptyBodyFunctionExpression'
+  );
+}
+
+function isBlockComment(comment) {
+  return (
+    comment.type === 'Block' ||
+    comment.type === 'CommentBlock' ||
+    // `meriyah`
+    comment.type === 'MultiLine'
+  );
+}
+
+function isLineComment(comment) {
+  return (
+    comment.type === 'Line' ||
+    comment.type === 'CommentLine' ||
+    // `meriyah` has `SingleLine`, `HashbangComment`, `HTMLOpen`, and `HTMLClose`
+    comment.type === 'SingleLine' ||
+    comment.type === 'HashbangComment' ||
+    comment.type === 'HTMLOpen' ||
+    comment.type === 'HTMLClose'
+  );
+}
+
+function printComment(path, options) {
+  return esTree(options).printComment(path, options);
+}
+
+const handleComments = {
+  avoidAstMutation: true,
+  ownLine: function (context) {
+    const options = context.options;
+    return esTree(options).handleComments.ownLine(context);
+  },
+  endOfLine: function (context) {
+    const options = context.options;
+    return esTree(options).handleComments.endOfLine(context);
+  },
+  remaining: function (context) {
+    const options = context.options;
+    return esTree(options).handleComments.remaining(context);
+  },
+};
+
+function getCommentChildNodes(node, options) {
+  return esTree(options).getCommentChildNodes(node, options);
+}
+
+function massageAstNode(node, options) {
+  return esTree(options).massageAstNode(node, options);
+}
+
+function willPrintOwnComments(path, options) {
+  return esTree(options).willPrintOwnComments(path, options);
+}
+
+module.exports = {
+  canAttachComment,
+  handleComments,
+  isBlockComment,
+  getCommentChildNodes,
+  massageAstNode,
+  willPrintOwnComments,
+  printComment,
+};

packages/@glimmerx/prettier-plugin-component-templates/lib/util.js

@@ -0,0 +1,7 @@
+function esTree(options) {
+  return options.plugins[0].printers.estree;
+}
+
+module.exports = {
+  esTree,
+};

packages/@glimmerx/prettier-plugin-component-templates/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@glimmerx/prettier-plugin-component-templates",
+  "version": "0.0.1",
+  "description": "A prettier formatter for glimmer component templates",
+  "main": "index.js",
+  "repository": "https://github.com/glimmerjs/glimmer-experimental",
+  "author": "Matt Edwards <[email protected]>",
+  "license": "MIT",
+  "private": false,
+  "files": [
+    "index.js",
+    "lib/**/*"
+  ],
+  "scripts": {
+    "test": "mocha"
+  },
+  "devDependencies": {
+    "chai": "^4.3.4",
+    "esm": "^3.2.25",
+    "mocha": "^7.1.1",
+    "prettier": "^2.3.0"
+  },
+  "volta": {
+    "node": "12.10.0",
+    "yarn": "1.22.4"
+  }
+}

packages/@glimmerx/prettier-plugin-component-templates/test/fixtures/basic/code.js

@@ -0,0 +1,14 @@
+import Component, { hbs } from '@glimmerx/component';
+
+export default class Page extends Component {
+  static template = hbs`
+  <html>
+  <head>
+<title>Hello World</title>
+  </head>
+  <body>
+  <h1>Goodbye Moon</h1>
+    </body>
+               </html>
+  `;
+}

packages/@glimmerx/prettier-plugin-component-templates/test/fixtures/basic/output.js

@@ -0,0 +1,14 @@
+import Component, { hbs } from '@glimmerx/component';
+
+export default class Page extends Component {
+  static template = hbs`
+    <html>
+      <head>
+        <title>Hello World</title>
+      </head>
+      <body>
+        <h1>Goodbye Moon</h1>
+      </body>
+    </html>
+  `;
+}