datacore icon indicating copy to clipboard operation
datacore copied to clipboard

Can I render JSX from an external script?

Open lx0n2acl opened this issue 10 months ago • 2 comments

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?

lx0n2acl avatar Mar 30 '25 13:03 lx0n2acl

I think your file extension has to be .jsx for jsx syntax to work

ljavuras avatar Mar 30 '25 18:03 ljavuras

That did it. Thanks @ljavuras !

lx0n2acl avatar Mar 30 '25 18:03 lx0n2acl