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

glimmer-engine

v0.23.0-alpha.1

Published

Glimmer compiles Handlebars templates into document fragments rather than string buffers

Downloads

431

Readme

Status Build Status Sauce Test Status

Glimmer is a flexible, low-level rendering pipeline for building a "live" DOM from Handlebars templates that can subsequently be updated cheaply when data changes.

It is written in TypeScript.

The project is still going through rapid changes at the moment. For the time being, please refer the architecture overview for more information.

Building Glimmer

  1. Ensure that Node.js is installed.
  2. Run npm install or yarn install to ensure the required dependencies are installed.
  3. Run npm run build to build each Glimmer package. The builds will be placed in the dist/ directory.

Glimmer's packages are only built when running npm run build (or ember build --env production). If you run ember build without setting the production environment, dist/ will only contain test assets.

If you want to use the built packages in other projects, you can use npm run yarn:link to execute the yarn link command inside each built package. (You must build the packages first with npm run build).

How to Run Tests

Via Ember CLI

  1. Run: ember test --server

Ember CLI is a CI tool, so it will run tests as you change files.

On the console with PhantomJS

  1. Run npm test.

In a browser

  1. Run npm start.
  2. Visit http://localhost:7357/tests/.

TypeScript Notes

"Friend" Properties and Methods

In TypeScript, private and protected refer to the class itself (and its subclasses).

Sometimes, you want to add a property or method that shouldn't be considered part of the external API (for other packages or Ember) but is expected to be used as part of an internal protocol.

In that case, it's ok to mark the property as private or protected and use ['property'] syntax to access the property inside of the same package.

class Layout {
  private template: Template;
}

function compile(layout: Layout, environment: Environment): CompiledBlock {
  return layout['template'].compile(environment);
}

The idea is that the compile function might as well be a private method on the class, but because the function leaks into untyped code, we want to be more careful and avoid exporting it.

Other use-cases might include protocols where a cluster of classes is intended to work together internally, but it's difficult to describe as a single class hierarchy.

This is a semi-blessed workflow according to the TypeScript team, and Visual Studio Code (and tsc) correctly type check uses of indexed properties, and provide autocompletion, etc.

You should not treat use of ['foo'] syntax as license to access private properties outside of the package.