Can I render JSX from an external script?
First off, this plugin is amazing 🔥🔥🔥 and I am excited to be able to use it for basically all my Obsidian scripting needs moving forward...
I essentially want to be able to create my own library of script files... so I was reading https://blacksmithgu.github.io/datacore/code-views#sharing-code on how I might do that.
I attempted to load a script externally like this:
// page.md
const { ListItem } = await dc.require("scripts/test.js");
return function View() {
return <ListItem text="whoa!" />;
}
// scripts/test.js
function ListItem({ text }) {
return <li>Some text: {text}</li>;
}
return { ListItem };
The Error I'm getting:
Error: Failed to execute script 'scripts/test.js': SyntaxError: Unexpected token '<'
So based on what I understand, this means that it doesn't know how to process the JSX that I'm returning from the ListItem component. I tried a few other things after briefly looking at the code, including return dc.api.executeJsx("<li>Some text: {text}</li>"); which gave me a different error but also defeats the purpose of using JSX syntax because I would have to wrap it in a string. I think how it's usually done in React apps is via transpilation... which doesn't seem feasible here.
Is there an easy way to do this or is this not a supported use case?
I think your file extension has to be .jsx for jsx syntax to work
That did it. Thanks @ljavuras !