Skip to content

Fix:Can't bind future values outside of HTML tags #58

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.

Sign up for GitHub

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix:Can't bind future values outside of HTML tags #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cd220b
Fix:Can't bind future values outside of HTML tags
Pawankalyan2023 Oct 12, 2025
7cdc847
Fix:Can't bind future values outside of HTML tags:changes
Pawankalyan2023 Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/parser/parser.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -602,4 +602,4 @@ describe('Parser', () => {

describe('Plain Objects', () => {
});
});
});
15 changes: 5 additions & 10 deletions src/parser/parser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,17 +283,12 @@ export function rml(strings: TemplateStringsArray, ...expressions: RMLTemplateEx
;

} else if(/>?\s*[^<]*$/m.test(string) && /^\s*[^<]*\s*<?/m.test(nextString)) {

// TODO
// will set the textContent of the given textNode
// Plain text template with async/observable expression
addRef(ref, TextContent(expression));
// FIXME: tbd
// FIXME: are we adding #REF multiple times?
//acc = existingRef?accPlusString:acc +string.replace(/\s*>/, ` ${RESOLVE_ATTRIBUTE}="${ref}">`) +ref;
acc += (existingRef?string:string.replace(/\s*>(?=[^<]*$)/, ` ${RESOLVE_ATTRIBUTE}="${ref}">`)) +INTERACTIVE_NODE_START +(initialValue ?? '') +INTERACTIVE_NODE_END;

acc += string + `<!--RML-INTERACTIVE-NODE ${ref}-->` + (initialValue ?? '') + '<!--/RML-INTERACTIVE-NODE-->';
Copy link
Contributor

@dariomannu dariomannu Oct 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just an extra HTML comment you're injecting into the output HTML, that's not going to fix the issue.

You need to keep the INTERACTIVE_NODE_START and INTERACTIVE_NODE_END markers as they mark sinks within plain-text sections.

The data binder will look for these and if it finds one, it will create a "text node" in the DOM where sinks can drop their content.

const stream = from('hello', 'world');

target.innerHTML = rml`
  this is a plain-text string, no HTML tags, but we want our stream to be sinked here: -> ${stream} -<
`;

the INTERACTIVE_NODE_START and INTERACTIVE_NODE_END markers will wrap the ${stream} part in the parser and the binder will unwrap it when the component is mounted.

Does that help giving an idea of what's happening and where do we need the change to be made?

We'll need a couple of unit tests, as well, to prove it works.

} else {
acc = accPlusString;
// Handle non-future expressions in plain text or other contexts
acc = accPlusString + (expression ?? '');
}

}
Expand All @@ -302,4 +297,4 @@ export function rml(strings: TemplateStringsArray, ...expressions: RMLTemplateEx
acc += strings[strlen];

return <HTMLString>acc;
}
}