Add standard snippets for html import and polymer element definitions

Polymer · Dec 18, 2016 · 1f34368 · 1f34368
1 parent 4a20153
commit 1f34368
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## Unreleased
 
 <!-- Please document PR changes here. -->
+### Added
+
+* Added standard template definitions for autocompletion.
 
 ### Added
 

diff --git a/src/editor-service.ts b/src/editor-service.ts
@@ -18,10 +18,14 @@ export type TypeaheadCompletion =
     ElementCompletion | AttributesCompletion | AttributeValuesCompletion;
 export interface ElementCompletion {
   kind: 'element-tags';
-  elements: {
-    tagname: string,
-    description: string, expandTo?: string, expandToSnippet?: string
-  }[];
+  elements: ElementSnippet[];
+}
+export interface ElementSnippet {
+  tagname: string;
+  description: string;
+  expandTo?: string;
+  expandToSnippet?: string;
+  prefix?: string;
 }
 export interface AttributesCompletion {
   kind: 'attributes';

diff --git a/src/local-editor-service.ts b/src/local-editor-service.ts
@@ -21,6 +21,8 @@ import {Warning, WarningCarryingException} from 'polymer-analyzer/lib/warning/wa
 import {getLocationInfoForPosition, isPositionInsideRange} from './ast-from-source-position';
 import {AttributeCompletion, EditorService, SourcePosition, TypeaheadCompletion} from './editor-service';
 
+import {snippets} from './snippets';
+
 export class LocalEditorService extends EditorService {
   private _analyzer: Analyzer;
   constructor(options: AnalyzerOptions) {
@@ -85,7 +87,7 @@ export class LocalEditorService extends EditorService {
           Array.from(document.getByKind('element')).filter(e => e.tagName);
       return {
         kind: 'element-tags',
-        elements: elements.map(e => {
+        elements: snippets.concat(elements.map(e => {
           const attributesSpace = e.attributes.length > 0 ? ' ' : '';
           return {
             tagname: e.tagName!,
@@ -97,7 +99,7 @@ export class LocalEditorService extends EditorService {
                 this._generateAutoCompletionForElement(e) :
                 undefined
           };
-        })
+        }))
       };
     }
 

diff --git a/src/snippets.ts b/src/snippets.ts
@@ -0,0 +1,48 @@
+import {ElementSnippet} from './editor-service';
+
+const snippets: ElementSnippet[] = [
+  {
+    'tagname': 'html-import',
+    'description': 'Template definition of an HTML import.',
+    'prefix': 'hi',
+    'expandTo': '<link rel="import" href="bower_components/.html">',
+    'expandToSnippet': '<link rel="import" href="${1:bower_components}/${2}/${2}.html">'
+  },
+  {
+    'tagname': 'tdd-test',
+    'description': 'Template definition for a TDD test suite',
+    'prefix': 'tdd-test',
+    'expandTo': '',
+    'expandToSnippet': `
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>$\{1:my-element}</title>
+    <script src="\${2:bower_components}/webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="\${2:bower_components}/web-component-tester/browser.js"></script>
+    <link rel="import" href="$3/$\{1:my-element}.html">
+  </head>
+  <body>
+  <test-fixture id="basic">
+    <template>
+      <$\{1:my-element}><$\{1:my-element}>
+    </template>
+  </test-fixture>
+  <script>
+    suite('$\{1:my-element} tests', function() {
+      var element;
+      setup(function() {
+        element = fixture('basic');
+      });
+      test('$6', function() {
+        $0
+      });
+    });
+  </script>
+  </body>
+</html>
+`
+  }
+];
+
+export {snippets};
diff --git a/src/test/editor-service_test.ts b/src/test/editor-service_test.ts
@@ -28,6 +28,8 @@ import {AttributesCompletion, EditorService, ElementCompletion} from '../editor-
 import {LocalEditorService} from '../local-editor-service';
 import {RemoteEditorService} from '../remote-editor-service';
 
+import {snippets} from '../snippets';
+
 chai.use(require('chai-subset'));
 
 function editorTests(editorFactory: (basedir: string) => EditorService) {
@@ -41,7 +43,7 @@ function editorTests(editorFactory: (basedir: string) => EditorService) {
 
   const elementTypeahead: ElementCompletion = {
     kind: 'element-tags',
-    elements: [
+    elements: snippets.concat([
       {
         tagname: 'behavior-test-elem',
         description: 'An element to test out behavior inheritance.',
@@ -84,13 +86,14 @@ function editorTests(editorFactory: (basedir: string) => EditorService) {
         expandTo: undefined,
         expandToSnippet: undefined
       },
-    ]
+    ])
   };
   // Like elementTypeahead, but we also want to add a leading < because we're
   // in a context where we don't have one.
   const emptyStartElementTypeahead = Object.assign({}, elementTypeahead);
   emptyStartElementTypeahead.elements =
       emptyStartElementTypeahead.elements.map(e => {
+        if (e.prefix) return e;
         let copy = Object.assign({}, e);
         let space = '';
         const elementsWithAttributes =
@@ -520,7 +523,7 @@ function editorTests(editorFactory: (basedir: string) => EditorService) {
             column: 0 /* after the space after the element name */
           }),
           {
-            'elements': [
+            'elements': snippets.concat([
               {
                 'description': '',
                 'expandTo': '<slot-test-elem></slot-test-elem>',
@@ -538,7 +541,7 @@ function editorTests(editorFactory: (basedir: string) => EditorService) {
                     `<slot-one-test-elem>$1</slot-one-test-elem>$0`,
                 'tagname': 'slot-one-test-elem'
               }
-            ],
+            ]),
             'kind': 'element-tags'
           });
     });