Activity

1. jdgaravito commented on Jan 24, 2025

   

   jdgaravito

   on Jan 24, 2025

   Last edited by jdgaravito

   Author

   More actions

   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.
2. Heyner128 commented on Feb 12, 2025

   

   Heyner128

   on Feb 12, 2025

   Last edited by Heyner128

   More actions

   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)
     }
   }