Skip to content
This repository has been archived by the owner on Sep 24, 2021. It is now read-only.

Add standard snippets for html import and polymer element definitions #36

Closed
wants to merge 1 commit into from
Closed

Add standard snippets for html import and polymer element definitions #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 8 additions & 4 deletions src/editor-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 4 additions & 2 deletions src/local-editor-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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!,
Expand All @@ -97,7 +99,7 @@ export class LocalEditorService extends EditorService {
this._generateAutoCompletionForElement(e) :
undefined
};
})
}))
};
}

Expand Down
48 changes: 48 additions & 0 deletions src/snippets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">'
Copy link
Contributor

Choose a reason for hiding this comment

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

This is tricky. If it's an app then they'll want bower_components/ or similar, but if it's a standalone element it should be ../.

We really need a signal that lets us tell whether some code is an app or a standalone component.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes agreed, shall I extract an issue for that in the CLI? I think adding a line to the bower.json stating the type is the cleanest solution?

},
{
'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>
Copy link
Contributor

Choose a reason for hiding this comment

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

I think a lot of this could be based off the element tagname. i.e.

<title>${1:my-element}</title>
...
<link rel="import" href="./$1.html">
...
<test-fixture id="basic">
  <template>
    <$1></$1>
  </template>
</test-fixture>
...
<script>
  suite('$1 tests', function() {
    ...
  });
</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};
11 changes: 7 additions & 4 deletions src/test/editor-service_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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.',
Expand Down Expand Up @@ -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 =
Expand Down Expand Up @@ -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>',
Expand All @@ -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'
});
});
Expand Down