Here is my Astro component that I am working with:
---
type Props = {
uuid: string;
};
const { uuid } = Astro.props;
---
<div class="my-feature" data-uuid={uuid} id="my-feature"></div>
<script is:inline src={import.meta.env.MY_SCRIPT}></script>
<script>
import { MyFeatureHelper } from '@/scripts/my-helper';
let myFeature;
const ref = document.getElementById('my-feature');
myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
uuid: this?.ref.uuid,
});
myFeaturer.build();
</script>
I am trying to pass the uuid prop to the <script> tag without using define:vars as mentioned in this post. It's important for me because if I do use define:vars, my script will be treated as is:inline and I can't import the JavaScript Class MyFeatureHelper that I need.
Is there a way for me to access the uuid and utilize it like uuid: this?.ref.uuid, possibly using the data-attribute trick?
Any advice on how to make this setup work correctly would be appreciated!