Eng-Drive

  • Eng-drive means (Eng driver), for THE Eng Web side to provide collaboration support, of course, it can also be run as an independent part, only used as a server (component) pre-rendering service
  • Eng-drive precompiles components of Eng syntax into files ending in.eng-compile. When calling to generate HTML component text, eng-drive has the best performance of its kind
  • Eng-drive precompiled file, can run on the Web side, perfectly compatible with all versions of browsers, through ENG-NOS rendering, has a perversion to almost the world’s first performance, is the Eng and its kind of tools outstanding in the complete rendering performance of about 1/3 time. Pure HTML text takes about 1/10 of the time

Release notes

  • Version 0.9 (current) provides only basic component precompilation and rendering capabilities
  • In version 1.0, the configuration management of component Route will be added, the configuration of data state management of Web Eng component will be added, and the scheduling support of active behavior of Web component will be added. (If you prefer to configure by yourself, please ignore it.)
  • 1.0 release will be released at the same time based on Eng related scaffolding demo instance, used to demonstrate the complete server pre-rendering, and the Web side data state management configuration,route configuration and how to seamlessly switch implementation, high and low version browser componentized rendering;
  • 1.0 (online before the end of 2018-030-july)

The statement

  • Eng is committed to simplifying the technical metaphysics of all similar tools, using the most concise, simple and minimal API to achieve the core of the same tools, and get rid of all redundant learning content, unnecessary waste, and achieve the same goal.

Matters needing attention

  • Only the e-base, e-attr, e-html and E-for component instructions of Eng can be precompiled and rendered. Dom operations are not supported at present. And the preparation of the vast majority of ordinary pages in theory will only use these four instructions, the need for pre-rendering is generated after the page, with other JS operation of the page; Other instructions/methods of Eng are better suited for developing components with interactive logic


NPM install -g eng-drive


Command: eng-init

  • Generate config file config.json and default widgets and widgets_eng_compile folders in the current working directory (current version only output directory configuration)
{" widgets_output ": {/ / output directory" base ":". / ", "path" : "widgets_ENG"}} / / eng - init command is equivalent to the require (' eng - drive). The init ();Copy the code


Command: eng-auto

  • Automatically find all component HTML files in the./widgets directory to compile and output to the./widgets_eng_compile directory
  • Note that each widget under./widgets should be a separate folder, named after the widget, and there is only one widget at the end of the.html. Other files will be copied and output to./widgets_eng_compile to produce the same directory structure
  • Equivalent to the require (‘ eng – drive). Auto ();


Method: eng. Manual (htmlText, callback)

  • Manually compile the ENG component
HtmlText: Eng HTML component text * callback: function(compileText) * compileText: The compiled text -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the var HTML = '< div id = "not" > < div e-base="base"><p>{{v}}</p></div></div>'; var eng=require('eng-drive'); eng.manual(html ,function(compileText){ console.log(compileText); });Copy the code


Eng. DataGlue (data, compileData, callback)

  • Generates the complete HTML text
* data: component data * compileData: compileData * callback: function(htmlText) * htmlText: The generated HTML text -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the var data = {base: {v: 'this is only a basic example'}}; 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 = "not" > < div > < p > this is only a basic example < / p > < / div > < / div >});Copy the code


Eng. DataGlueTo (data, compileData, SRC, widgetName, callback)

  • Generates the complete HTML text to the specified folder
* data: component data * compileData * SRC: output path * widgetName: component folder name * callback: function(){* //do some thing *}Copy the code

License