export default function ( | |
Component: typeof SvelteComponent, | |
events?: { [svelteEvent: string]: string } | |
) { | |
return class { | |
$element: Element[]; | |
initialProps: { [key: string]: any }; | |
component: SvelteComponent; | |
constructor($element) { | |
'ngInject'; | |
this.$element = $element; | |
} | |
addInitialProps(extraProps) { | |
this.initialProps = { | |
...this.initialProps, | |
...extraProps, | |
}; | |
} | |
$postLink() { | |
this.component = new Component({ | |
target: this.$element[0], | |
props: this.initialProps, | |
}); | |
each(events || {}, (angularBinding, svelteEvent) => { | |
this.component.$on(svelteEvent, ({ detail }) => { | |
this[angularBinding](detail); | |
}); | |
}); | |
} | |
$onChanges(changes) { | |
let changed = {}; | |
each(changes, ({ currentValue }, key) => { | |
changed[key] = currentValue; | |
}); | |
if (this.component) { | |
this.component.$set(changed); | |
} else { | |
this.initialProps = { | |
...this.initialProps, | |
...changed, | |
}; | |
} | |
} | |
$onDestroy() { | |
if (this.component) { | |
this.component.$destroy(); | |
} | |
} | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
If you're not using Typescript, you can find a plain ES6 version of this Gist at https://gist.github.com/rcline/af3a58cd5324dfcd5e7e22e7f3c64347