Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace ember-template-imports with content-tag #153

Merged
merged 1 commit into from
Dec 1, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Replace ember-template-imports with content-tag
gitKrystan committed Oct 19, 2023
commit dcfb56f4e9b5c1eb9fa0a774e61c27c81a74e5cf
4 changes: 3 additions & 1 deletion .github/ISSUE_TEMPLATE/1-bug-report.md
Original file line number Diff line number Diff line change
@@ -26,7 +26,9 @@ A clear and concise description of what you expected to happen.
### 🌍 Environment

- prettier-plugin-ember-template-tag version: -
- ember-template-imports version: -
- ember-template-imports version (if applicable): -
- content-tag version (if applicable): -
- eslint-plugin-ember version (if applicable): -

### ➕ Additional Context

4 changes: 1 addition & 3 deletions design.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# The Plan

1. Run `preprocessEmbeddedTemplates` from ember-template-imports to convert gjs files with `<template>` tags into valid JS. The `<template>` tag gets converted into something like `[__GLIMMER_TEMPLATE('<h1> Hello </h1>', { strictMode: true })]`.
1. Run `Preprocessor.process` from content-tag to convert gjs files with `<template>` tags into valid JS. The `<template>` tag gets converted into something like `[__GLIMMER_TEMPLATE('<h1> Hello </h1>', { strictMode: true })]`.
1. Run the `estree` Prettier printer, which formats the valid JS above.
1. Grab template contents from `GLIMMER_TEMPLATE` AST node described above.
1. Run the hbs Prettier printer against the template contents.
@@ -11,5 +11,3 @@
<h1>Hello</h1>
</template>
```

Unfortunately, this will likely involve either monkey-patching or re-implementing the estree printer due to this issue: https://github.com/prettier/prettier/issues/10259
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -52,7 +52,6 @@
"@babel/core": "^7.23.2",
"@glimmer/syntax": "^0.84.3",
"ember-cli-htmlbars": "^6.3.0",
"ember-template-imports": "^3.4.2",
"prettier": "^3.0.3"
},
"devDependencies": {
@@ -67,6 +66,7 @@
"@typescript-eslint/parser": "^6.8.0",
"@vitest/ui": "^0.34.6",
"concurrently": "^8.2.2",
"content-tag": "^1.1.2",
"eslint": "^8.51.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-eslint-comments": "^3.2.0",
13 changes: 10 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 3 additions & 7 deletions src/config.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
// @ts-expect-error FIXME: TS7016 Get ETI to export these + types
import * as util from 'ember-template-imports/src/util.js';

export const PARSER_NAME = 'ember-template-tag';
export const PRINTER_NAME = 'ember-template-tag-estree';

/* eslint-disable @typescript-eslint/no-unsafe-member-access */
export const TEMPLATE_TAG_NAME = util.TEMPLATE_TAG_NAME as string;
export const TEMPLATE_TAG_PLACEHOLDER = util.TEMPLATE_TAG_PLACEHOLDER as string;
/* eslint-enable @typescript-eslint/no-unsafe-member-access */
// FIXME: Are these still accurate?
export const TEMPLATE_TAG_NAME = 'template';
export const TEMPLATE_TAG_PLACEHOLDER = '__GLIMMER_TEMPLATE';

export const TEMPLATE_TAG_OPEN = `<${TEMPLATE_TAG_NAME}>`;
export const TEMPLATE_TAG_CLOSE = `</${TEMPLATE_TAG_NAME}>`;
22 changes: 4 additions & 18 deletions src/parse.ts
Original file line number Diff line number Diff line change
@@ -6,16 +6,11 @@ import {
isMemberExpression,
isTaggedTemplateExpression,
} from '@babel/types';
import { getTemplateLocals } from '@glimmer/syntax';
import { preprocessEmbeddedTemplates } from 'ember-template-imports/lib/preprocess-embedded-templates.js';
import { Preprocessor } from 'content-tag';
import type { Parser } from 'prettier';
import { parsers as babelParsers } from 'prettier/plugins/babel.js';

import {
PRINTER_NAME,
TEMPLATE_TAG_NAME,
TEMPLATE_TAG_PLACEHOLDER,
} from './config';
import { PRINTER_NAME, TEMPLATE_TAG_PLACEHOLDER } from './config';
import type { Options } from './options.js';
import type {
GlimmerExpressionExtra,
@@ -41,6 +36,7 @@ import { hasAmbiguousNextLine } from './utils/ambiguity.js';
import { assert, squish } from './utils/index.js';

const typescript = babelParsers['babel-ts'] as Parser<Node | undefined>;
const p = new Preprocessor();

const preprocess: Required<Parser<Node | undefined>>['preprocess'] = (
text: string,
@@ -54,17 +50,7 @@ const preprocess: Required<Parser<Node | undefined>>['preprocess'] = (
preprocessed = text;
} else {
options.__inputWasPreprocessed = false;
preprocessed = preprocessEmbeddedTemplates(text, {
getTemplateLocals,

templateTag: TEMPLATE_TAG_NAME,
templateTagReplacement: TEMPLATE_TAG_PLACEHOLDER,

includeSourceMaps: false,
includeTemplateTokens: false,

relativePath: options.filepath,
}).output;
preprocessed = p.process(text);
}

return desugarDefaultExportTemplates(preprocessed);
3 changes: 2 additions & 1 deletion tests/package.json
Original file line number Diff line number Diff line change
@@ -9,7 +9,8 @@
"preview": "vite preview"
},
"dependencies": {
"prettier-plugin-ember-template-tag": "workspace:^"
"prettier-plugin-ember-template-tag": "workspace:^",
"ember-template-imports": "^3.4.2"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FIXME: Can remove this bc we won't need to maintain compat.

},
"devDependencies": {
"typescript": "^5.2.2",
40 changes: 36 additions & 4 deletions tests/unit-tests/preprocessed.test.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { getTemplateLocals } from '@glimmer/syntax';
import { Preprocessor } from 'content-tag';
import { preprocessEmbeddedTemplates } from 'ember-template-imports/lib/preprocess-embedded-templates.js';
import {
TEMPLATE_TAG_NAME,
TEMPLATE_TAG_PLACEHOLDER,
} from 'ember-template-imports/lib/util.js';
// FIXME: Do we need this?
// import {
// TEMPLATE_TAG_NAME,
// TEMPLATE_TAG_PLACEHOLDER,
// } from 'ember-template-imports/lib/util.js';
import { describe, expect, test } from 'vitest';

import { AMBIGUOUS_PLACEHOLDER } from '../helpers/ambiguous.js';
@@ -13,11 +15,41 @@ import { format } from '../helpers/format.js';
import type { Config } from '../helpers/make-suite.js';
import { makeSuite } from '../helpers/make-suite.js';

// FIXME: Are these still accurate?
export const TEMPLATE_TAG_NAME = 'template';
export const TEMPLATE_TAG_PLACEHOLDER = '__GLIMMER_TEMPLATE';

const p = new Preprocessor();

describe('format', () => {
makeSuite(getAllCases, preprocessedTest)({ name: 'with preprocessed code' });

/*
FIXME: We might not be able to maintain compatibility with
ember-template-imports preprocessed code, which would mean we'd have to
drop support for it altogether (and remove the set of tests below).

This would cause compat issues with eslint-plugin-ember until they are using
content-tag. Additionally, if they start using content-tag, running prettier
via eslint-plugin-ember won't be possible until _this_ library supports
content-tag.
*/
makeSuite(
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FIXME: It turns out we won't need this compat, so can remove these tests.

getAllCases,
preprocessedTestLegacy,
)({ name: 'with legacy ember-template-imports preprocessed code' });
});

function preprocessedTest(config: Config, testCase: TestCase): void {
test(`it formats ${testCase.name}`, async () => {
const code = testCase.code.replaceAll(AMBIGUOUS_PLACEHOLDER, '');
const preprocessed = p.process(code);
const result = await format(preprocessed, config.options);
expect(result).toMatchSnapshot();
});
}

function preprocessedTestLegacy(config: Config, testCase: TestCase): void {
test(`it formats ${testCase.name}`, async () => {
const code = testCase.code.replaceAll(AMBIGUOUS_PLACEHOLDER, '');
const preprocessed = preprocessEmbeddedTemplates(code, {