diff --git a/.eslintignore b/.eslintignore index c2f4d856..4e687525 100644 --- a/.eslintignore +++ b/.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.* diff --git a/.eslintrc.js b/.eslintrc.js index 9549c30b..12ba1b16 100644 --- a/.eslintrc.js +++ b/.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': [ diff --git a/.prettierignore b/.prettierignore index dc5198e9..671d5e48 100644 --- a/.prettierignore +++ b/.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.* + diff --git a/.prettierrc b/.prettierrc index d4401713..c243e68c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,6 @@ { "singleQuote": true, "trailingComma": "es5", - "printWidth": 100 + "printWidth": 100, + "plugins": ["./packages/@glimmerx/prettier-plugin-component-templates"] } diff --git a/package.json b/package.json index 19a40e53..a398188c 100644 --- a/package.json +++ b/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", diff --git a/packages/@glimmerx/blueprint/files/package.json b/packages/@glimmerx/blueprint/files/package.json index 07e52b68..f51f14e7 100644 --- a/packages/@glimmerx/blueprint/files/package.json +++ b/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" ] }, { diff --git a/packages/@glimmerx/core/tests/index.ts b/packages/@glimmerx/core/tests/index.ts index f08a1af8..3af479b9 100644 --- a/packages/@glimmerx/core/tests/index.ts +++ b/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, options?: RenderComponentOptions) => { - const element = document.getElementById('qunit-fixture')!; - element.innerHTML = ''; +renderTests('@glimmerx/core', async ( + component: Constructor, + 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; +}); diff --git a/packages/@glimmerx/core/tests/modifier-tests.ts b/packages/@glimmerx/core/tests/modifier-tests.ts index 7f9fd68e..ee138720 100644 --- a/packages/@glimmerx/core/tests/modifier-tests.ts +++ b/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``; + static template = hbs` + + `; @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(), ``, 'the component was rendered' ); element.querySelector('button')!.click(); - await didRender(); assert.strictEqual( - element.innerHTML, + element.innerHTML.trim(), ``, 'the component was rerendered' ); diff --git a/packages/@glimmerx/core/tests/render-tests.ts b/packages/@glimmerx/core/tests/render-tests.ts index 108dd1c0..4ca6e858 100644 --- a/packages/@glimmerx/core/tests/render-tests.ts +++ b/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``; + static template = hbs` + + `; @tracked count = 0; @@ -170,7 +172,7 @@ export default function renderTests( } const html = await render(MyComponent); - assert.strictEqual(html, ``, 'the component was rendered'); + assert.strictEqual(html.trim(), ``, 'the component was rendered'); }); test('supports functions as simple helpers', async (assert) => { diff --git a/packages/@glimmerx/eslint-plugin/package.json b/packages/@glimmerx/eslint-plugin/package.json index ac9322ce..9a026f02 100644 --- a/packages/@glimmerx/eslint-plugin/package.json +++ b/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", diff --git a/packages/@glimmerx/helper/src/helper.ts b/packages/@glimmerx/helper/src/helper.ts index efc5124e..411a9ce9 100644 --- a/packages/@glimmerx/helper/src/helper.ts +++ b/packages/@glimmerx/helper/src/helper.ts @@ -31,7 +31,7 @@ class BasicHelperManager implements HelperManager { {}, { 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 }); }, } ); diff --git a/packages/@glimmerx/prettier-plugin-component-templates/.prettierignore b/packages/@glimmerx/prettier-plugin-component-templates/.prettierignore new file mode 100644 index 00000000..1b2ff1d1 --- /dev/null +++ b/packages/@glimmerx/prettier-plugin-component-templates/.prettierignore @@ -0,0 +1,2 @@ +test/fixtures/*/code.* +test/fixtures/*/output.* \ No newline at end of file diff --git a/packages/@glimmerx/prettier-plugin-component-templates/README.md b/packages/@glimmerx/prettier-plugin-component-templates/README.md new file mode 100644 index 00000000..5fd989d9 --- /dev/null +++ b/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 `