Skip to content

Instantly share code, notes, and snippets.

@EndangeredMassa
Created June 28, 2017 21:03
Show Gist options
  • Save EndangeredMassa/7ae77707064aac0a9accafbc73497e81 to your computer and use it in GitHub Desktop.
Save EndangeredMassa/7ae77707064aac0a9accafbc73497e81 to your computer and use it in GitHub Desktop.
import Component, { tracked } from '@glimmer/component';
function tryJsonParse(string) {
try {
return JSON.parse(string);
} catch (error) {
const realError = new Error(`${error.message}\nTried to parse: ${string}`);
throw realError;
}
}
function parseAttribute(rawAttribute) {
const firstChar = rawAttribute[0];
if (firstChar === '[' || firstChar === '{') {
return tryJsonParse(rawAttribute);
}
return rawAttribute;
}
function setAttributes(glimmerComponent, webComponent) {
const attrs = Array.prototype.slice.call(webComponent.attributes);
glimmerComponent.htmlAttrs = attrs.reduce((newAttrs, node) => {
newAttrs[node.name] = parseAttribute(node.nodeValue);
return newAttrs;
}, {});
}
class AttrComponent extends Component {
@tracked
htmlAttrs: any;
// to catch new dom elements
didInsertElement() {
const webComponent = this.element.parentNode.host;
// glimmer's web component's attribute changed callback
// will invoke this for us, if it exists
webComponent.onAttributeChangedCallback = (attr, newValue) => {
const attrs = Array.prototype.slice.call(webComponent.attributes);
setAttributes(this, webComponent);
};
setAttributes(this, webComponent);
}
dispatchEvent(name, args) {
const webComponent = this.element.parentNode.host;
const event = new CustomEvent(name, { detail: args });
webComponent.dispatchEvent(event);
}
}
export default class SelectList extends AttrComponent {
@tracked('htmlAttrs')
get items() {
if (this.htmlAttrs) {
return this.htmlAttrs.items;
}
return [];
}
@tracked('htmlAttrs')
get icon() {
if (this.htmlAttrs) {
return this.htmlAttrs.icon;
}
return '';
}
selectItem(itemValue) {
this.dispatchEvent('select-item', itemValue);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment