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 🙏

© 2026 – Pkg Stats / Ryan Hefner

eng-drive

v0.9.31

Published

Eng's component rendering "node" tool

Readme

bug

  • 0.9.1x 修复读取未压缩html文件导致的输出乱码

  • 0.9.2x 修复对e-html指令的编译不正确

  • 0.9.31 修复 manual 方法读取非min的html文本 输出乱码

注意事项

  • 仅对 Eng 的 e-base、e-attr、e-html、e-for 四个组件指令做出预编译和渲染, 涉及 Dom 操作目前不支持 . 并且事实上绝大部分常规页面的编写也仅仅会用到这四个指令 ;
  • Eng 的其它指令/方法更适合用来开发具有交互逻辑的组件

安装 : npm install -g eng-drive

命令 : eng -init

  • 在当前工作目录生成配置文件 config.json , 以及默认的 widgets 和 widgets_eng_compile 两个文件夹 (当前版本仅有输出目录配置)
{
  "widgets_output":{ //输出目录
        "base":"./",
        "path":"widgets_ENG"
  }
}
// eng -init 命令   等价于 require('eng-drive').init();
   

命令 : eng -auto

  • 自动查找 ./widgets 目录下所有的 组件 html文件编译输出到 ./widgets_eng_compile 目录下
  • 注意 ./widgets 下的每个组件因该是单独的文件夹 , 命名为组件的命名 , 并且只有一个.html结尾的组件 , 其它文件也会被拷贝输出到 ./widgets_eng_compile 生成相同的目录结构
  • 等价于 require('eng-drive').auto();

方法 : eng.manual( htmlText , callback )

  • 手动编译 eng 组件
  * htmlText : Eng的html 组件文本
  * callback : function( compileText )
  *            compileText : 编译后的文本
----------------------------------------------------------------  
var html='<div id="demo1"><div e-base="base"><p>{{v}}</p></div></div>';
var eng=require('eng-drive');
    eng.manual(html ,function(compileText){
    
	        console.log(compileText); 
	        
	   }); 

方法 : eng.dataGlue(data , compileData , callback)

  • 生成完整的html文本
  *  data :        组件数据
  *  compileData : 编译数据
  *  callback : function( htmlText )
  *             htmlText : 生成的html文本             
----------------------------------------------------------------  
var data={
	      base:{
	      	  v:'这仅是个基本范例' 
	      }
    };   
var compileData={"base":{"v":{"1":[1]},"$_a":["<div><p>","","</p></div>"]},"$_a":["<div id=\"demo1\"><!--$#base#$--></div>"]};   
    eng.dataGlue(data,compileData,function( htmlText ){
				
     console.log(htmlText);
					   
      //div id="demo1"><div><p>这仅是个基本范例</p></div></div>
    });   

方法 : eng.dataGlueTo(data , compileData, src , widgetName , callback)

  • 生成完整的html文本到指定的文件夹
  *  data :        组件数据
  *  compileData : 编译数据
  *  src :         输出路径   
  *  widgetName :  组件文件夹命名
  *  callback : function(){
  *              //do some thing 
  *            }           

License

License