cdoremus
cdoremus3mo ago

How do you use Rollup with JSR or the npm: prefix?

I noticed that when JSR was originally advertised it would support Rollup. Is there an example how to do that, or use Rollup with the npm: prefix? I want to transform and bundle Lit custom elements containing code annotated with decorators.
3 Replies
Deno AI Helper
Deno AI Helper3mo ago
I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, I can provide some general advice. To use Rollup in a Deno project, you would typically need to ensure that Rollup is compatible with Deno's import syntax and runtime environment. Since Deno does not natively support Node.js modules without the use of compatibility layers or import maps, you would have to consider how Rollup is being invoked and whether it can resolve modules using Deno's import syntax, such as import ... from "npm:...". If you're looking to use Rollup with the npm: prefix, this would imply that you're trying to import npm packages directly in Deno. Deno has the ability to import npm packages using the npm: prefix, but this feature is experimental and may not be fully compatible with all npm packages or build tools like Rollup. As for JSR (JavaScript References), I'm not sure what you're referring to as it's not a term commonly associated with Deno or JavaScript bundling to my knowledge. If you meant JSPM (JavaScript Package Manager), which is a package manager that can work with ES module syntax, then you would need to check JSPM's documentation for integration with Rollup. Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of the advice given. For specific guidance on using Rollup with Deno and the npm: prefix, you may want to look into community resources, examples, or reach out to the Deno community for more targeted assistance.
cdoremus
cdoremus3mo ago
@Deno AI Helper JSR refers to the new JavaScript Registry that the Deno team has created. I guess your "brain" needs to be updated. 🌝
Deno AI Helper
Deno AI Helper3mo ago
Ah, my apologies for the confusion earlier. JSR indeed refers to the JavaScript Registry that the Deno team has created. However, the documentation does not provide explicit instructions on how to use Rollup with JSR or the npm: prefix for bundling Lit custom elements with decorators. The documentation does mention that JSR is optimized for TypeScript and supports ES modules only, and it works with Deno and npm-based projects. It also states that modules are published to JSR as TypeScript source code, and API documentation generation, type declarations for Node-like environments, and transpilation are all handled by JSR. Since Rollup is a module bundler for JavaScript, you would typically use it with plugins that can transform and bundle your code. For Lit custom elements with decorators, you would need a plugin that can handle decorators, such as @rollup/plugin-typescript for TypeScript support. To use Rollup with JSR, you would follow the standard process of setting up Rollup in your project with the necessary plugins for TypeScript and decorators. Then, you would import your dependencies from JSR using ES module syntax. If you're using the npm: prefix to import npm packages in Deno, you would do so directly in your code, and Rollup should be able to bundle these as long as the correct plugins and configuration are in place. Please note that this is a general advice and not a specific guide from the documentation. For a detailed example or step-by-step instructions, you may need to refer to community examples or reach out to the Deno community for more targeted assistance. 🦕