Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// surprises (or uglier code that conditionally checks for both forms of the
// spec).
const Component = Vue.extend( vueComponent )
// map from Vue prop types to SkateJS prop types
const vuePropTypes = makeVuePropTypes( vueComponent.props )
// contains scope ID of this element's Vue component as well as sub component
// IDs
const scopeIds = getAllScopeIds( vueComponent )
// this will contain all CSS rules for this element's Vue component and
// sub-components
let matchingRules = null
return class VueWebComponent extends withUpdate( withRenderer( ElementClass ) ) {
constructor(...args) {
super(...args)
console.log(' --- VueWebComponent.constructor')
this.vue_instance = new Component
this.vue_instancePromise = null
this.vue_mounted = false
}
/**
* Define a renderer that mounts a Vue component in this element's shadow
* root.
*/
renderer( root, render ) {
// pass this.props as first arg, whose keys are iterated on in
// forChangedProps, otherwise nothing happens the first time
// because prevProps is empty at first.
forChangedProps( this.props, prevProps, ( name, oldVal ) => {
// pass the value along
this.vue_instance[ name ] = this[ name ]
})
}
}
}
// a hack class used so we don't conflict with Vue's builtin component. Is there a better way?
class RealSlot extends withLifecycle( withUpdate( HTMLElement ) ) {
constructor(...args) {
super(...args)
this.style.display = 'contents'
}
connected() {
if (this.actualSlot) return
this.actualSlot = document.createElement('slot')
this.appendChild(this.actualSlot)
}
static get props() {
return {
name: Object.assign({}, skatePropTypes.string, {attribute: true} )
}
}
import { props, shadow, withUpdate } from 'skatejs';
class WithUpdate extends withUpdate() {
static get props() {
return {
name: props.string
};
}
updated() {
shadow(this).innerHTML = `Hello, ${this.name}!`;
}
}
customElements.define('with-update', WithUpdate);