npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dario-hacking/vite-6-alpha-environment-provider-workerd

v0.0.5

Published

Package that exports a `workerdEnvironmentProvider` function that can be used to set a Vite Environment to run code inside the [`workerd`](https://github.com/cloudflare/workerd) runtime (via [`Miniflare`](https://github.com/cloudflare/workers-sdk/tree/mai

Downloads

8

Readme

Vite Environment Provider Workerd

Package that exports a workerdEnvironmentProvider function that can be used to set a Vite Environment to run code inside the workerd runtime (via Miniflare).

[!NOTE] Based on the [email protected] Environment API implementation.

Package Usage

The package exposes the workerdEnvironmentProvider function that can be used to create new environments that run code inside the workerd runtime:

environments: {
  myEnvironment: workerdEnvironmentProvider(),
}

this sets both a dev and a build environments (of course users can also process the workerdEnvironmentProvider returned value to tweak the returned environments and/or use only one of them).

In the case of the dev environment, the environment instance is enhanced with an api field that contains a getHandler method, this is what can then be used to handle incoming requests (making sure that they are run inside workerd):

const handler = await devEnv.api.getHandler({
  entrypoint: workerEntrypoint,
});

You can see usage examples here and here.

Package Structure

The package's code is structured in the following way:

src
├── debug-dumps
│   ├── ...
│   └── ...
├── worker
│   └── index.ts
├── codeTransformation.ts
├── index.ts
└── workerd-custom-import.cts
  • debug-dumps
    can be ignored, it contains logic that we've used to dump logs and files that the environment encounters which we've used for debugging (this is off by default and can be enabled by setting the DEBUG_DUMPS env variable)

  • worker/index.ts
    the actual entrypoint worker code that we run inside workerd, this includes the Vite Module Runner. It runs code by importing the getHandler's entrypoint argument.

  • codeTransformation.ts
    logic that we needed to include to make workerd correctly handles esm modules importing cjs ones, this will soon become unnecessary since changes in workerd are being worked on to fix the cjs issues

  • index.ts
    the package's index file, it exposes the workerdEnvironmentProvider function which creates the Vite Environments. In the case of the dev one, it creates one that spins up a miniflare instance that uses the worker/index.ts transpiled code as is main module.

  • workerd-custom-import.cts
    this is a file that we use to implement interoperability between ems and cjs (external) code.

Important points

The module fallback service

In the index.ts code you can see a unsafeModuleFallbackService this is a relatively new feature of workerd and miniflare that is instrumental here to enable the module runner's runExternalModule method to function in workerd.

How this works is that when workerd tries to import a module and it can't find it in its module graph then it sends a request to the module fallback service providing the import details.

The module fallback service can then fetch and return the code for the module from the filesystem (in our case using DevEnvironment#pluginContainer#resolveId to allow Vite to perform the correct module resolution).

Allowing the import inside workerd to them be resolved (and the workerd module graph updated).

workerd-custom-imports.cts

Workerd supports cjs code but not as part of it's main/entrypoint module. So with a standard setup with a single esm module we wouldn't be able to import cjs modules. The way we workaround this limitation is by creating an additional CommonJS module which exports a custom import function (which is actually implement by a plain dynamic import) such import can then import both cjs and esm modules, allowing us to have interoperability between the two.