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

generator-polymer-typescript

v0.2.3

Published

generator for polymer2, typescript and redux application. Bundle with webpack

Downloads

2

Readme

generator-polymer-typescript NPM version Build Status Dependency Status

Greenkeeper badge generator for polymer2 typescript and redux application

Installation

First, install Yeoman and generator-polymer-typescript using npm (we assume you have pre-installed node.js). Require node version above 6.0.0

npm install -g yo
npm install -g generator-polymer-typescript

Commands

  • yo polymer-typescript generates a full polymer-redux typeScript project.
  • yo polymer-typescript:module generates a project for pure typeScript ES6 module.
  • yo polymer-typescript:material generates project with one Polymer element.

Then generate your new project:

yo polymer-typescript

stack

These are the main technologies selected for this project and purpose of use

TypeScript

Leverage on typeScript syntax and strong typing to create a self documented code that scale at larger teams.

Resource: typeScript official site

ES6 Modules

Create standard JavaScript modules that are easy to reuse.

Resource: es6 modules explain

webCompoments with Polymer2

Polymer is a JavaScript library that helps you create custom reusable HTML elements. Resource: Polymer

State management with Polymer redux

Redux make easy complex state management of applications. Resource: polymer-redux

Routing with redux routing

Application routing integrated with Redux to mirror application state in the URL. Resource: redux-routing

Testing with webComponent tester

Power full testing suite to test both webComponent and ES6 module. Resource: web-component-tester

Bundle with webpack

Tranform our typeScrip code to packaged javascript application. ressource: webpack

Package management with npm and bower.

Bower is used to install client side package and Npm mainly to development dependency.

command

npm install: install project dependency.

npm run tsc: run typeScript compiler.

npm run build build and bundle application with webpack.

npm run demo launch application with webpack server.

npm run test bundle test files with webpack and run test with webComponent tester.

npm run build:test:watch bundle test files with webpack and watch on changes.

npm run test:persist bundle test files with webpack and watch on changes.

npm run doc generate project documentation with typedoc.

directories

|- src project source

|--- lib (API and helper) in pure ES6 TypeScript module.

  Are concerned with non UI computational tasks such as API access, data treatment, communication, data storage...

  They are stateless.

  Interact with others modules via asynchronous function calls.

  They are built from a factory and most of the time They are singletons.

|--- presentational reusable webComponent

  Are concerned with how thinks look

  Don’t specify how the data is loaded or mutated

  receive data via attributes or function calls.

  Are notifying container component of change via event bubbling

|--- container redux-polymer components

  Are concerned with how thinks works

  May encapsulate other containers and presentational modules.

  Provide data and configuration to other containers

  They act as controller between other modules.

|--- action, reducer and store Redux helper

  Register Redux action and reducer to encapsulate Redux dependency outside library and presentational modules.

|- test contains test boilerplate.

Register you modules under test `test.ts` and `modules.json`

|- types typing declare files for modules where declaration is missing.

Getting To Know Yeoman

  • Yeoman has a heart of gold.
  • Yeoman is a person with feelings and opinions, but is very easy to work with.
  • Yeoman can be too opinionated at times but is easily convinced not to be.
  • Feel free to learn more about Yeoman.

License

MIT © hubjac1