diff --git a/src/plugins/format/index.js b/src/plugins/format/index.js index 8e9314e..058aa6e 100644 --- a/src/plugins/format/index.js +++ b/src/plugins/format/index.js @@ -3,7 +3,6 @@ import { has_modifier } from "@/utilities/utils"; function plugin({ directive, evaluateLater, mutateDom }) { directive("format", (el, { modifiers }, { effect }) => { - const placeholder_regex = /{{(?.+?)}}/g; const is_once = has_modifier(modifiers, "once"); const has_format_attr = el => el.hasAttribute("x-format"); @@ -55,7 +54,7 @@ function plugin({ directive, evaluateLater, mutateDom }) { } function process_text_node(node) { - const tokens = node.textContent.split(placeholder_regex); + const tokens = node.textContent.split(/{{(?.+?)}}/g); if (tokens.length > 1) { const fragment = new DocumentFragment(); @@ -80,10 +79,19 @@ function plugin({ directive, evaluateLater, mutateDom }) { function process_attributes(node) { for (let attr of node.attributes) { - const matches = [...attr.value.matchAll(placeholder_regex)]; + const matches = [...attr.value.matchAll(/{{(?.+?)}}/g)]; if (matches.length) { + const getters = new Map( + matches.map(m => [ + m.groups.expr, + create_getter( + evaluateLater, + node, + m.groups.expr)])); + const template = attr.value; - update(() => attr.value = template.replace(placeholder_regex, (_, expr) => create_getter(evaluateLater, node, expr)())); + + update(() => attr.value = template.replace(/{{(?.+?)}}/g, (_, expr) => getters.get(expr)())); } } }