Astro Support

[jdgaravito]

I'm planning to use this on my astro project but the suggested implementation doesnt work, astro wont render any formated date at all.

Still getting the default April 1.

I dont see any way to import it into my server block or client. the tags relative-time are not doing anything.

Can you make it compatible so i can import it into my project like all the npm modules? something like:

import { relative-time } from Relative-Time-Elements

[jdgaravito]

this is the only way I made it work, but is because is making a call to github to download it wich is not performance friendly,

---

const { formattedDate } = Astro.props;

interface Props {
    formattedDate: string;
}
---

<relative-time datetime={formattedDate}>
    {formattedDate}
</relative-time>

<script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>

tried something like

---
import '@github/relative-time-element';
---

or using as a module

<script type="module">
    import '@github/relative-time-element';
</script>

and i had no luck.

[Heyner128]

I had the same problem with Angular, the problem is that the bundlers of the Frameworks remove the unused imports, and the component depends on executing the define static method of the component.

The solution is to use the default export somewhere to force the bundler to include the component code.

Example in Angular syntax:

import RelativeTimeElement from '@github/relative-time-element'

@Component({
  selector: 'my-component',
  imports: [],
  template: '<relative-time [attr.datetime]="myDate">April 1, 2024</relative-time>',
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MyComponent {
  myDate = new Date()

  constructor() {
    // Logs the default export to include the code...
    console.log(RelativeTimeElement)
  }
}