Added prettier-plugin for formatting glimmer component templates

.eslintignore

@@ -14,3 +14,5 @@
 **/packages/@glimmerx/babel-preset/test/**/output.js
 **/packages/@glimmerx/babel-preset/test/**/code.ts
 **/packages/@glimmerx/babel-preset/test/**/output.ts
+**/packages/@glimmerx/prettier-plugin-component-templates/test/fixtures/**/code.*
+**/packages/@glimmerx/prettier-plugin-component-templates/test/fixtures/**/output.*

.eslintrc.js

@@ -8,8 +8,8 @@ module.exports = {
   env: {
     es6: true,
   },
-  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
-  plugins: ['@typescript-eslint', '@glimmerx', 'prettier'],
+  extends: ['eslint:recommended'],
+  plugins: ['@typescript-eslint', '@glimmerx'],
   rules: {
     '@glimmerx/template-vars': 'error',
   },
@@ -42,6 +42,7 @@ module.exports = {
       files: [
         'packages/@glimmerx/babel-preset/**/*.js',
         'packages/@glimmerx/eslint-plugin/**/*.js',
+        'packages/@glimmerx/prettier-plugin-component-templates/**/*.js',
         'packages/@glimmerx/webpack-loader/**/*.js',
       ],
       env: {
@@ -63,11 +64,9 @@ module.exports = {
       extends: [
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
-        'prettier/@typescript-eslint',
       ],
       rules: {
         '@typescript-eslint/no-explicit-any': 'error',
-        '@typescript-eslint/explicit-function-return-type': 'error',
         '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 
         '@typescript-eslint/ban-types': [

.prettierignore

@@ -1 +1,4 @@
 packages/@glimmerx/babel-preset/test/
+packages/@glimmerx/prettier-plugin-component-templates/test/fixtures/*/code.*
+packages/@glimmerx/prettier-plugin-component-templates/test/fixtures/*/output.*
+

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "es5",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["./packages/@glimmerx/prettier-plugin-component-templates"]
 }

package.json

@@ -13,15 +13,17 @@
   ],
   "scripts": {
     "build": "scripts/build.js",
+    "format:check": "prettier --check 'packages/**/*.{js,ts}'",
     "format": "prettier --write 'packages/**/*.{js,ts}'",
     "lint": "eslint . --cache --ext .js,.ts",
     "prepublishOnly": "scripts/build.js",
     "problems": "tsc -p tsconfig.json --noEmit",
     "start": "webpack-dev-server",
     "storybook": "yarn build && yarn workspace basic-example-app storybook",
-    "test": "yarn lint && testem ci && yarn test:babel-plugins",
+    "test": "yarn format:check && yarn lint && testem ci && yarn test:babel-plugins && yarn test:prettier",
     "test:babel-plugins": "mocha -r esm --timeout 5000 packages/@glimmerx/babel-preset/test packages/@glimmerx/eslint-plugin/test/lib/rules",
     "test:ember": "yarn workspace basic-addon ember try:one",
+    "test:prettier": "mocha -r esm packages/@glimmerx/prettier-plugin-component-templates/test",
     "test:playground": "yarn workspace glimmerx-playground test",
     "test:watch": "testem"
   },
@@ -48,12 +50,10 @@
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "babel-loader": "^8.0.6",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint": "^7.29.0",
     "fs-extra": "^9.0.0",
     "lerna": "^3.20.2",
-    "prettier": "^2.0.4",
+    "prettier": "^2.3.1",
     "qunit": "^2.9.3",
     "release-it": "^13.5.1",
     "release-it-lerna-changelog": "^2.1.2",

packages/@glimmerx/blueprint/files/package.json

@@ -33,14 +33,12 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint": "^7.29.0",
     "file-loader": "^6.0.0",
     "glob": "7.1.6",
     "html-webpack-plugin": "^4.0.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.2",
+    "prettier": "^2.3.1",
     "qunit": "^2.9.3",
     "qunit-dom": "^1.1.0",
     "style-loader": "^1.1.3",
@@ -61,12 +59,10 @@
     },
     "plugins": [
       "@glimmerx",
-      "@typescript-eslint",
-      "prettier"
+      "@typescript-eslint"
     ],
     "extends": [
-      "eslint:recommended",
-      "plugin:prettier/recommended"
+      "eslint:recommended"
     ],
     "ignorePatterns": [
       "dist/",
@@ -83,8 +79,7 @@
         ],
         "extends": [
           "plugin:@typescript-eslint/eslint-recommended",
-          "plugin:@typescript-eslint/recommended",
-          "prettier/@typescript-eslint"
+          "plugin:@typescript-eslint/recommended"
         ]
       },
       {

packages/@glimmerx/core/tests/index.ts

@@ -3,19 +3,19 @@ import renderTests, { Constructor } from './render-tests';
 import { renderComponent, RenderComponentOptions } from '..';
 import Component from '@glimmerx/component';
 
-renderTests(
-  '@glimmerx/core',
-  async (component: Constructor<Component>, options?: RenderComponentOptions) => {
-    const element = document.getElementById('qunit-fixture')!;
-    element.innerHTML = '';
+renderTests('@glimmerx/core', async (
+  component: Constructor<Component>,
+  options?: RenderComponentOptions
+) => {
+  const element = document.getElementById('qunit-fixture')!;
+  element.innerHTML = '';
 
-    if (options) {
-      options.element = element;
-      await renderComponent(component, options);
-    } else {
-      await renderComponent(component, element);
-    }
-
-    return element.innerHTML;
+  if (options) {
+    options.element = element;
+    await renderComponent(component, options);
+  } else {
+    await renderComponent(component, element);
   }
-);
+
+  return element.innerHTML;
+});

packages/@glimmerx/core/tests/modifier-tests.ts

@@ -7,7 +7,9 @@ import { renderComponent, didRender } from '..';
 module('Modifier Tests', () => {
   test('Supports the on modifier', async (assert) => {
     class MyComponent extends Component {
-      static template = hbs`<button {{on "click" this.incrementCounter}}>Count: {{this.count}}</button>`;
+      static template = hbs`
+        <button {{on "click" this.incrementCounter}}>Count: {{this.count}}</button>
+      `;
       @tracked count = 0;
 
       @action
@@ -19,17 +21,17 @@ module('Modifier Tests', () => {
     const element = document.getElementById('qunit-fixture')!;
 
     await renderComponent(MyComponent, element);
+
     assert.strictEqual(
-      element.innerHTML,
+      element.innerHTML.trim(),
       `<button>Count: 0</button>`,
       'the component was rendered'
     );
 
     element.querySelector('button')!.click();
-
     await didRender();
     assert.strictEqual(
-      element.innerHTML,
+      element.innerHTML.trim(),
       `<button>Count: 1</button>`,
       'the component was rerendered'
     );

packages/@glimmerx/core/tests/render-tests.ts

@@ -159,7 +159,9 @@ export default function renderTests(
 
     test('a component can use modifiers', async (assert) => {
       class MyComponent extends Component {
-        static template = hbs`<button {{on "click" this.incrementCounter}}>Count: {{this.count}}</button>`;
+        static template = hbs`
+          <button {{on "click" this.incrementCounter}}>Count: {{this.count}}</button>
+        `;
 
         @tracked count = 0;
 
@@ -170,7 +172,7 @@ export default function renderTests(
       }
 
       const html = await render(MyComponent);
-      assert.strictEqual(html, `<button>Count: 0</button>`, 'the component was rendered');
+      assert.strictEqual(html.trim(), `<button>Count: 0</button>`, 'the component was rendered');
     });
 
     test('supports functions as simple helpers', async (assert) => {

packages/@glimmerx/eslint-plugin/package.json

@@ -16,13 +16,13 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.29.0",
     "mocha": "^7.1.1"
   },
   "peerDependencies": {
     "@glimmer/syntax": "^0.77.5",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0"
+    "eslint": "^7.29.0"
   },
   "volta": {
     "node": "12.10.0",

packages/@glimmerx/helper/src/helper.ts

@@ -31,7 +31,7 @@ class BasicHelperManager implements HelperManager<BasicHelperBucket> {
       {},
       {
         get(_target, key) {
-          return owner && owner.lookup({ type: 'service', name: (key as unknown) as string });
+          return owner && owner.lookup({ type: 'service', name: key as unknown as string });
         },
       }
     );

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

@@ -0,0 +1,2 @@
+test/fixtures/*/code.*
+test/fixtures/*/output.*

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

@@ -0,0 +1,63 @@
+# 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.
+
+### Options
+
+In your prettier config options (e.g. `.prettierrc`, `prettier.config.js`, etc.)
+
+`.prettierrc`
+
+```json
+{
+  "hbsSingleQuote": true
+}
+```
+
+Defaults to `false` forcing double-quotes for all attributes in an hbs embed. When `true` will rewrite all quotes to single-quotes.
+
+## 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.
+
+### Debugging
+
+#### Debugging
+
+```
+PRETTIER_DEBUG=true node --inspect-brk  node_modules/.bin/prettier --config=./test/fixtures/basic/config.js ./test/fixtures/basic/code.js
+```
+
+### Generate a snapshot
+
+```
+node node_modules/.bin/prettier --ignore-path --config=./test/fixtures/simple-formatted/config.js ./test/fixtures/simple-formatted/code.js > ./test/fixtures/simple-formatted/output.js
+```
+
+### Testing
+
+#### Run all tests
+
+```
+yarn test
+```
+
+## TODO
+
+- [ ] Add support for `<template>` tag semantics.