Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bind bugs - supporting onclick attribute, retaining class attribute, walk bug - processDirective correctly removing attributes with 'modifiers', block bug - only remove template element if isConnected #186

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
13 changes: 12 additions & 1 deletion src/block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,18 @@ export class Block {
node = next
}
} else {
this.template.parentNode!.removeChild(this.template)
try {
// Possibly related to https://github.com/vuejs/petite-vue/discussions/188 , but at times (not always predictable, so not
// sure what markup/order causes issue) a simple v-for="o in model.searchResultsResources" would cause an error when reactivity
// was changing for searchResultsResources from an array with values to an empty array, parentNode was occasionally null.
if (this.template.isConnected) {
this.template.parentNode!.removeChild(this.template)
}
} catch (error) {
console.log("petite-vue: Unable to remove template");
console.log(error);
console.log(this.template);
}
}
this.teardown()
}
Expand Down
5 changes: 3 additions & 2 deletions src/directives/bind.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
camelize
} from '@vue/shared'

const forceAttrRE = /^(spellcheck|draggable|form|list|type)$/
const forceAttrRE = /^(spellcheck|draggable|form|list|type|onclick)$/

export const bind: Directive<Element & { _class?: string }> = ({
el,
Expand All @@ -20,7 +20,8 @@ export const bind: Directive<Element & { _class?: string }> = ({
let prevValue: any

// record static class
if (arg === 'class') {
// Update: Was checking if arg==="class", but that was false if bind to { class: }, so just storing no matter what for later use
if (el.className) {
el._class = el.className
}

Expand Down
3 changes: 2 additions & 1 deletion src/walk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ const processDirective = (
let dir: Directive
let arg: string | undefined
let modifiers: Record<string, true> | undefined
const attrName = raw;

// modifiers
raw = raw.replace(modifierRE, (_, m) => {
Expand All @@ -143,7 +144,7 @@ const processDirective = (
if (dir) {
if (dir === bind && arg === 'ref') dir = ref
applyDirective(el, dir, exp, ctx, arg, modifiers)
el.removeAttribute(raw)
el.removeAttribute(attrName)
} else if (import.meta.env.DEV) {
console.error(`unknown custom directive ${raw}.`)
}
Expand Down