{{ name }} @if (ready) {} @for (x of xs; track x) {} @let y = count;
';
+ const body = quote === '"' ? template.replaceAll('"', "'") : template;
+ const state = EditorState.create({
+ doc: `@Component({ template: ${quote}${body}${quote} }) class App {}`,
+ extensions: await inlineSupport(),
+ });
+ expect(tokens(state)).toEqual(
+ expect.arrayContaining(["div:tag", "title:attr", "name:var", "@if:control", "@for:control", "@let:definition"]),
+ );
+ });
+
+ it.each([
+ "const x = { template: `{{ name }}
` };",
+ "@Other({ template: `{{ name }}
` }) class App {}",
+ "@Component({ nested: { template: `{{ name }}
` } }) class App {}",
+ "@Component({ templateUrl: `{{ name }}
` }) class App {}",
+ "Component({ template: `{{ name }}
` });",
+ "@Component({ template: `${name}
` }) class App {}",
+ "@Component({ template: `` + suffix }) class App {}",
+ ])("keeps unrelated strings plain: %s", async (doc) => {
+ expect(tokens(EditorState.create({ doc, extensions: await inlineSupport() }))).not.toContain("div:tag");
+ });
+
+ it("keeps ordinary TypeScript projects plain", async () => {
+ const support = await loadSupport(findLanguageDescription("TypeScript", "/p/app.ts")!);
+ expect(
+ tokens(EditorState.create({ doc: "@Component({ template: `` }) class App {}", extensions: support! })),
+ ).not.toContain("div:tag");
+ });
+
+ it("supports quoted metadata keys and namespace decorators", async () => {
+ const state = EditorState.create({
+ doc: '@ng.Component({ "template": ` {
+ expect(tokens(EditorState.create({ doc, extensions: await inlineSupport() }))).toContain("div:tag");
+ });
+
+ it("matches a fresh parse after editing templates and decorator context", async () => {
+ const extensions = await inlineSupport();
+ let state = EditorState.create({
+ doc: "@Component({ template: `", ""],
+ ["
{{ name }}
` }) class App {}",
+ extensions,
+ });
+ for (const [search, replacement] of [
+ ["name", "user.name"],
+ ["Component", "Other"],
+ ["Other", "Component"],
+ ["template:", "other:"],
+ ]) {
+ const from = state.doc.toString().indexOf(search!);
+ state = state.update({ changes: { from, to: from + search!.length, insert: replacement } }).state;
+ expect(tokens(state)).toEqual(tokens(EditorState.create({ doc: state.doc, extensions })));
+ }
+ });
+});
+
+describe.each(["inline", "external"])("Angular tag closing (%s)", (mode) => {
+ async function support() {
+ return mode === "inline" ? inlineSupport() : angular();
+ }
+ function wrap(template: string) {
+ return mode === "inline" ? `@Component({ template: \`${template}\` }) class App {}` : template;
+ }
+
+ it.each([
+ ["<|", "/", ""],
+ ["", "/", "", ""],
+ ['", "/", ""],
+ ["{{ count |}}", "/", "{{ count /}}"],
+ ])("handles %s + %s", async (before, text, after) => {
+ const view = editor(wrap(before), await support());
+ try {
+ type(view, text);
+ expect(view.state.doc.toString()).toBe(wrap(after));
+ } finally {
+ view.destroy();
+ }
+ });
+
+ it("closes tags at multiple cursors in one undoable input", async () => {
+ const doc = wrap(" EditorSelection.cursor(p));
+ const view = new EditorView({
+ state: EditorState.create({
+ doc,
+ selection: EditorSelection.create(ranges),
+ extensions: [await support(), history(), EditorState.allowMultipleSelections.of(true)],
+ }),
+ });
+ try {
+ type(view, "/");
+ expect(view.state.doc.toString()).toBe(wrap("[0] = {
const EXTRA_TAGS: Record[0]> = {
JavaScript: JS_TAGS,
TypeScript: JS_TAGS,
+ "Angular TypeScript": JS_TAGS,
JSX: JS_TAGS,
TSX: JS_TAGS,
Java: JAVA_TAGS,
diff --git a/src/editor/core/model/document.test.ts b/src/editor/core/model/document.test.ts
index 9ba5feeb..0700d97d 100644
--- a/src/editor/core/model/document.test.ts
+++ b/src/editor/core/model/document.test.ts
@@ -231,6 +231,20 @@ describe("DocumentManager + slots", () => {
expect(slot.currentState().facet(languageFacet)?.name).not.toBe("angular");
});
+ it.each(["ts", "mts", "cts"])("loads Angular inline templates for .%s documents", async (ext) => {
+ const path = `/p/src/app.${ext}`;
+ const { manager } = setup({
+ "/p/angular.json": "{}",
+ [path]: "@Component({ template: `