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

mber

v0.14.18

Published

Modern, fast, non-backward compatible ember-cli replacement with Module Unification RFC

Downloads

110

Readme

docker-based-ci

mber: Modern Ember.js CLI alternative, without broccoli.

This build system uses TypeScript, Module Unification RFC and fastboot by default. It also runs JS transpilation, bundling and linting in a multithreaded context with a thread pool in order to utilize all your CPU cores. I've recently rewrote ember-cli, because it uses a not-so-ideal broccoli build system that does too much counter-intuitive magic. One day after reading ember-cli source code, I've realized rewriting this from scratch is the only way to move forward for me personally.

Mber is a very minimal, fast and strict alternative for ember-cli. Mber does pretty much everything ember-cli does unless you want to create your own addon. You can use most of the ember addons, as long as the addon itself doesn't inject things to your broccoli/ember-cli runtime. In future I might support addon creation/testing as well.

Lots of thought and effort went into designing this replacement. Mber has a full test suite. Currently mber has 54 less dependencies than ember-cli as of this writing, this is without counting the massive sub-dependencies. It is highly suggested to read the source code, it is very simple, readable and written with ES modules and async/await. Contributions are always welcome. Mber never blocks the nodejs event loop.

I've never benchmarked this against ember-cli, but my observation is, mber is at least 5 times faster than ember-cli. The difference is probably more(can get to 20x+) for complex builds and big apps. Also no more zombie processes that consume your default port, massive tmp folders or immortal/kill-resistant build processes.

Installation

Make sure you have node.js v15+ installed. mber uses the latest native nodejs worker_thread to achive multithreading and the latest node.js native fs/promises module. Then install mber CLI:

npm install -g mber

Check mber CLI commands:

mber

Create an mber application:

mber new [your-app-name]

run mber server:

mber s

Now your development server is running on http://localhost:1234

Testing

Running your application test suite is same as before:

mber test --server

You can now view your tests in your browser afterwards.

If you are running your tests in the terminal and CI servers you can use the following:

mber test

If you want to view/debug the browser output:

mber test --debug=true

Currently tests only run on the actual google chrome for CI. In future I might implement CI mode support for other browsers.

Adding libraries and ember-cli-addons to your build

Instead of ember-cli-build.js you now have index.js in your project root which allows you to add 3rd party code to your application and build your application. The syntax is very similar to ember-cli. However here we are slightly more explicit and respect node.js conventions. In far future this design decision will allow node.js imports of your frontend code:

// in your index.js

/* eslint-env node */
const app = require('mber');

module.exports = function(ENV) {
  const { environment } = ENV;

  if (environment !== 'somecustomenvironment') {
    app.import('node_modules/yourlibrary/dist/', { type: 'vendor '});

    app.import('node_modules/chart.js/dist/Chart.min.js', {
      type: 'application', prepend: true, using: [{
        transformation: 'fastbootShim'
      }]
    }); // NOTE: same sytax as documented in ember-cli docs
  }

  // NOTE: Your addons are now not magically imported for the sake of explicitness and control.
  // Instead, for example you can import your code via:
  app.importAddon('ember-cli-moment', {
    type: 'vendor', using: [{ transformation: 'fastbootShim' }]
  });

  return app.build(environment);
}

Whitelisting npm modules

Mber supports importing npm modules or browser javascript as AMD modules. However you need to explicitly state these imports in your build config(index.js). The reason why this is needed is explained here:

// in your index.js

/* eslint-env node */
const app = require('mber');

module.exports = function(ENV) {
  const { environment } = ENV;

  app.importAsAMDModule('moment', 'node_modules/moment/min/moment.min.js', {
    type: 'vendor'
  });

  app.importAsAMDModule('bip39', {
    type: 'vendor', using: [{ transformation: 'fastbootShim' }]
  });

  return app.build(environment);
}

// then in your application code you can simply import these modules

import Component from '@ember/component';
import moment from 'moment';
import bip39 from 'bip39';

export default Component.extend({
  phrase: bip39.generateMnemonic()
});

Adding dynamic inline-content to your index.html

./index.html supports dynamic inline-content based on your environment configuration:

<!-- in your index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">
    <!-- EMBER_CLI_FASTBOOT_TITLE --><!-- EMBER_CLI_FASTBOOT_HEAD -->

    <link rel="stylesheet" href="/assets/application.css">
  </head>
  <body>
    <!-- EMBER_CLI_FASTBOOT_BODY -->

    <script src="/assets/vendor.js"></script>
    <script src="/assets/application.js"></script>

    {{google-analytics}}

    {{sentry}}
  </body>
</html>
// in your index.js

/* eslint-env node */
const app = require('mber');

module.exports = function(ENV) {
  const { environment } = ENV;

  if (environment === 'production') {
    app.injectInlineContent('googleAnalytics', `
      <script>
        window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
        ga('create', '${ENV.googleAnalyticsId}', 'auto');
      </script>
      <script async src='https://www.google-analytics.com/analytics.js'></script>
    `);
  }

  if (ENV.sentry.url) {
    app.injectInlineContent('sentry', `
      <script>
        Raven.config('${ENV.sentry.url}', {
          ignoreUrls: [${ENV.sentry.ignoreUrls}],
          ignoreErrors: ${JSON.stringify(ENV.sentry.ignoreErrors)}
        }).addPlugin(Raven.Plugins.Ember).install();
      </script>
    `);
  }

  return app.build(environment);
}

Extra: How to exclude ember-data from your application:

By default mber builds an ember application without jQuery. If want jquery in your application do this:

const app = require('mber');

module.exports = function(ENV) {
  const { environment } = ENV;

  // your other configuration ..

  app.import('node_modules/jquery/dist/jquery.min.js', {
    type: 'vendor', prepend: true
  });

  return app.build(environment);
}

If you want to exclude EmberData from your application. Add excludeEmberData to your config/environment.js:

'use strict';

module.exports = function(environment) {
  let ENV = {
    modulePrefix: '{{applicationName}}',
    environment,
    excludeEmberData: true // to exclude ember-data
  }

  // .. remaining code

  return ENV;
}

Hipster feature: You can now run your frontend app from your command line:

mber console

Yep, now you can.

Using ember-i18n with mber

Currently ember-i18n has legacy folder/code under addon directory that gets filtered during ember-cli builds. Until that issue gets resolved you can use mber-i18n instead. Example:

// in your index.js

/* eslint-env node */
const app = require('mber');

module.exports = function(ENV) {
  const { environment } = ENV;

  app.importAddon('ember-i18n', 'mber-i18n', { type: 'vendor' }); // here we are telling mber to inject addon code of mber-i18n npm module, however use ember-i18n module name during AMD transpilation
}

Using sinon with mber tests

Sinon is a very large javascript project with 10k+ lines of code, this can make your initial build noticibly slow for tests. When you importAsAMDModule(file), mber by default runs the target javascript file through babel and browserify. In order to disable this transpilation you can use: { transpile: false } option, therefore maintain the exceptional initial build speed:

/* eslint-env node */
const app = require('mber');

module.exports = function(ENV) {
  const { environment } = ENV;

  if (environment === 'test') {
    app.importAsAMDModule('sinon', 'node_modules/sinon/pkg/sinon-no-sourcemaps.js', {
      type: 'test', prepend: true, transpile: false
    });
  }

  return app.build(environment);
}

Enabling Ember optional features

Currently ember-source builds toggle two features based on environment configurations. You can toggle them in your environment.js:

module.exports = function(environment) {
  let ENV = {
    _APPLICATION_TEMPLATE_WRAPPER: false, // NOTE: true by default
    _TEMPLATE_ONLY_GLIMMER_COMPONENTS: true // NOTE: false by default
  }
};

CREDITS

This would have been impossible without the great interop libraries, structures, conventions and the framework source code itself which is mainly developed by the ember core team and the community by large.

This library is also a message to inspire and demonstrate Embers superiority in design and community to other frontend developers who are not yet fully knowledgeable of Ember.js framework.

The software is currently in beta stage, expect it to become stable shortly with no backward-compatibility promises.