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

edge-functions

v4.3.0

Published

Tool to launch and build JavaScript/Frameworks. This tool automates polyfills for Edge Computing and assists in creating Workers, notably for the Azion platform.

Downloads

1,471

Readme

Azion Bundler - Building Applications for Azion Runtime

Azion Bundler is a powerful tool designed to streamline the development and deployment of JavaScript applications and frameworks. This powerful utility automates polyfills for Azion Runtime, significantly simplifying the process of creating Workers.

One of the key highlights of Azion Bundler is its ability to establish an intuitive and efficient protocol for facilitating the creation of presets. This makes customization and adaptation to specific project needs even more accessible, providing developers with the necessary flexibility to optimize their applications effectively and efficiently.

Supported

E2E tests run daily in the Bundler Examples to ensure that the presets and frameworks continue to work correctly.

Table: | Test | Status | | ------------------------------------ | ------ | | Next 14 2 15 Middleware | ✅ | | Next 13 5 6 I18n | ✅ | | Next 12 3 4 I18n | ✅ | | Hexo Static | ✅ | | Next 13 5 6 Middleware | ✅ | | Next 12 3 4 Middleware | ✅ | | Next Node Pages 12 3 1 | ✅ | | Next 13 5 6 Config | ✅ | | Next 12 3 4 Config | ✅ | | Next Static | ✅ | | Gatsby Static | ✅ | | Next Node Pages 12 3 1 Fs | ✅ | | Vue Vite Static | ✅ | | Next 12 Static | ✅ | | Astro Static | ✅ | | Simple Js Env Vars | ✅ | | Eleventy Static | ✅ | | React Static | ✅ | | Angular Static | ✅ | | Simple Js Network List | ✅ | | Svelte Static | ✅ | | Vitepress Static | ✅ | | Nuxt Static | ✅ | | Docusaurus Static | ✅ | | Simple Js Firewall Event | ✅ | | Simple Js Network List With Firewall | ✅ | | Jekyll Static | ✅ | | Simple Js Esm Worker | ✅ | | Simple Js Esm Node | ✅ | | Simple Ts Esm | ⚠️ | | Simple Js Esm | ✅ |

Last test run date: 10/30/24 03:38:51 AM

Quick Installation

For those who just want to use Azion Bundler in their project without contributing to the development, you can install it directly from npm.

npm install edge-functions

or if you prefer yarn:

yarn add edge-functions

Getting Started for Development

Follow these steps to start using Azion Bundler:

  1. Clone the repository: Clone the Azion Bundler repository from GitHub to your local machine.

    git clone https://github.com/aziontech/bundler.git
  2. Installation: Navigate to the cloned Azion Bundler directory and install the required dependencies.

    cd bundler
    npm yarn install
  3. Install the Azion Bundler CLI globally, which allows you to use it as a command-line tool from anywhere in your system.

    npm install -g

    This command sets up the necessary project structure and configuration files for Azion Bundler.

  4. Start developing: Once the project is set up, you can start developing your JavaScript applications or frameworks using the power of Bundler. Leverage the automated polyfills, Worker creation assistance, and other features provided by Bundler to enhance your development workflow.

Using Azion Bundler

See some examples below:

  • Build a JavaScript/Node project (back-end)

    azbundler build
  • Build a TypeScript/Node (back-end)

    azbundler build --preset typescript
  • Build a Next.js project

    azbundler build --preset next
  • Build Astro.js project

    azbundler build --preset astro
  • Test your project locally (after build)

    azbundler dev

Azion.config.js

The azion.config.js file offers a robust configuration system for Bundler. This file is not mandatory but acts as an override mechanism. If you define properties in this file, they will supersede the preset configurations. Properties not defined will rely on the preset.

Here's a detailed breakdown of the configuration properties available in azion.config.js:

Entry

Type: String

Description: This represents the primary entry point for your application, where the building process begins.

Note: Entry will be ignored for jamstack solutions.

Builder

Type: String ('esbuild' or 'webpack')

Description: Defines which build tool to use. The available options are esbuild and webpack.

Polyfills

Type: Boolean

Description: Determines whether Node.js polyfills should be applied. This is useful for projects that leverage specific Node.js functionality but target environments without these built-in features.

Worker

Type: Boolean

Description: This flag indicates that the constructed code inserts its own worker expression, such as addEventListener("fetch").

Preset

Type: Object

Description: Provides preset-specific configurations.

  • Name (Type: String): Refers to the preset name, e.g., "vue" or "next"..

MemoryFS

Type: Object

Description: Configurations related to the in-memory filesystem.

  • InjectionDirs (Type: Array of Strings): Directories to be injected into memory for runtime access via the fs API.

  • RemovePathPrefix (Type: String): A prefix path to be removed from files before injecting into memory.

Custom

Type: Object

Description: Allows you to extend the capabilities of the chosen bundler (either webpack or esbuild) with custom plugins or configurations.

  • Plugins (Type: Object): Add your custom plugins for your chosen bundler here.

Example Configuration

For a Next/Faststore-based project:

module.exports = {
  build: {
    entry: 'src/index.js',
    builder: 'webpack',
    polyfills: true,
    worker: false,
    preset: { name: 'next' },
    memoryFS: {
     injectionDirs: ['.faststore/@generated/graphql'],
     removePathPrefix: '.faststore/',
   },
    custom: {
      plugins: {},
    },
  }
};

Note: Adapting azion.config.js to your setup allows a personalized development experience, catering to the specific needs of your JavaScript applications and frameworks.

Docs

Wasm Notes

To use wasm presets you need to install the necessary tools to build your code:

Node.js Support and Report

The compatibility between Azion Runtime and Node.js is an ongoing task, but a set of Node Runtime APIs are listed and compatible with Azion Runtime.

Contributing

Check the Contributing doc.

Code of Conduct

Check the Code of Conduct.

License

MIT