efront 4.0.11 → 4.0.15

package/docs/compare-en.md

@@ -0,0 +1,327 @@
+# efront vs. angular/react/vue
+
+* `efront` is a development environment, not a dependency library. Additionally, `efront` provides a browser mode component library called 'zimoli', which is provided in a discrete functionality manner and allows for but does not enforce the use of any item.
+
+* Here we only present the facts and do not make any evaluations. The behavior of a certain official "belittling others and elevating oneself" is not criticized by efront.
+* For the comparison of the web section in the following text, use the `zimoli` component library in the efront environment as a reference
+
+## 表面参数对比
+
+| Comparison item\framework          | efront/(zimoli)                                                             | angular                            | react                            | vue                            |
+| -------------------- | --------------------------------------------------------------------------- | ---------------------------------- | -------------------------------- | ------------------------------ |
+| Hello World object code | ≈1kb;                                                                       | >30kb                           | >30kb                         | ≈30kb;                         |
+| Development environment startup time     | ≈0s;                                                                        | >2s                             | >2s                           | >2s                            |
+| development language             | js/html/less                                                                | ts/html/less/sass/scss             | jsx/css/js/ts/html               | html/css/js                    |
+| Export Component Dependencies       | 无                                                                          | angular                            | react                            | vue                            |
+| Official routing             | zimoli，No need to register a path before use                                                  | angular-router, Path registration is required before use | react-router, Path registration is required before use | vue-router, Path registration is required before use |
+| Cross domain implementation             | Built in development environment                                                                | Configure browser or server                 | Configure browser or server               | Configure browser or server             |
+| Code loading scheme         | Dependency loading/Automatic preloading/Manual preloading`preapre('/page/path');` / Load on dynamic path access | One load/Or load on access              | One load/Or load on access            | One load/Or load on access          |
+| Jump to pass parameters             | `go`(pagepath, params)                                                 | ignore                                 | ignore                               | ignore                             |
+| Asynchronous Object Parameter Transfer         | `cast`(target, data) 
 `care`(target, handle)          | ignore                                 | ignore                               | ignore                             |
+
+## Architecture Comparison
+
+### 1. efront/zimoli
+
+In the efront environment, users directly operate or create dom elements in an isolated environment, and zimoli/render is responsible for assembly and binding between elements.
+
+### 2.  angular 1~9
+
+Angular1 isolates the view and logic, and JS can update the view by updating the data on the scope. The user's input on the view can be automatically synchronized to the scope through binding relationships. Angular2+abstracts the scope as an instance of a class in typescript, and its actual purpose remains unchanged. Angular's own logic maintains the binding relationship between data and views.
+
+### 3.  react
+
+React maintains synchronization with the view through the virtual dom. Before each rendering, the virtual dom is reconstructed through user logic, while React maintains synchronization between the virtual dom and the view.
+
+### 4.  vue
+
+Vue uses Object. defineProperty for data binding, which is different from the mechanism of event binding in regular, but it also isolates views from logic and maintains the binding relationship between data and views.
+
+## grammatical comparison
+
+### 1. conditional construct
+
+```xml
+<!-- efront/(zimoli) with render(element,scope) -->
+<component1 ng-if="expression"> </component1>
+<!-- or -->
+<component1 v-if="expression"> </component1>
+<!-- Or any prefix -->
+<component1 x-if="expression"> </component1>
+<!-- In the following text, the prefix can be modified for the prefix that starts with 'ng-' -->
+```
+
+```xml
+<!-- angular 1.x -->
+<component1 ng-if="expression" ></component1>
+<!-- angular 2+ -->
+<component1 *ngIf="expression" ></component1>
+ ```
+
+```jsx
+// react render() Using jsx syntax in
+render(){
+    return expression ? <Component1></Component1> : null
+}
+```
+
+```xml
+<!-- vue Start with 'v-' --> 
+<component1 v-if="expression"></component1>
+```
+
+### 2. 循环结构
+
+```xml
+<!-- efront/(zimoli) with render(element,scope) -->
+<component1 ng-repeat="(item,index) in expression"></component1>
+<component1 v-for="(item,index) in expression"></component1>
+<component1 ng-repeat="item in expression"></component1>
+<component1 v-for="item in expression"></component1>
+```
+
+```xml
+<!-- angular 1.x -->
+<component1 ng-repeat="(item,index) in expression" ></component1>
+<!-- angular 1.x -->
+<component1 ng-repeat="item in expression" ></component1>
+<!-- angular 2+ structural grammar -->
+<component1 *ngFor="let item of expression;let index=index" ></component1>
+<!-- angular 2+ directive syntax -->
+<component1 ngFor [ngForOf]="expression" let-item let-index></component1>
+ ```
+
+```jsx
+// react render() Using map syntax in
+render(){
+    return expression.map((item,index)=><Copoment1></Component1>)
+}
+```
+
+```xml
+<!-- vue Start with 'v-' --> 
+<component1 v-for="(item,index) in expression"></component1>
+<!-- vue Start with 'v-' --> 
+<component1 v-for="item in expression"></component1>
+```
+
+### 3. Data binding
+
+```xml
+<!-- efront/(zimoli) with render(element,scope)  -->
+<component1 ng-bind="expression"></component1>
+<!--  efront/(zimoli) with render(element,scope) Set JS object properties element[key]=value -->
+<image _src="expression" />
+<image .src="expression" />
+<image :src="expression" />
+<!--  efront/(zimoli) with render(element,scope) Set Element Attributes element.setAttribute(key,value) -->
+<image src_="expression" />
+<image src.="expression" />
+<image src:="expression" />
+<image src@="expression" />
+```
+
+```xml
+<!-- angular 1.x -->
+<component1 ng-bind="expression" ></component1>
+<image ng-src="expression" />
+<!-- angular 2+ -->
+<component1 [innerText]="expression" ></component1>
+<image [src]="expression" />
+<!-- angular 1+ -->
+<component1 >{{expression}}</component1>
+<image src="{{expression}}" />
+ ```
+
+```jsx
+// react render() Using jsx syntax
+render(){
+    return <Component1> { expression } </Component1>
+}
+```
+
+```xml
+<!-- vueStart with 'v-' --> 
+<component1 >{{expression}}</component1>
+<image v-bind:src="expression" />
+<image :src="expression" />
+```
+
+### 4. two-way/reverse/Event binding
+
+```xml
+<!-- efront/(zimoli) with render(element,scope) -->
+<component1 ng-model="expression"></component1>
+<component1 ng-click="expression"></component1>
+<component1 @click="expression"></component1>
+<component1 v-on:click="expression"></component1>
+```
+
+
+```xml
+<!-- angular 1.x -->
+<input ng-model="expression" />
+<button ng-click="expression" ></button>
+<!-- angular 2+ -->
+<component1 [(ngModel)]="expression" ></component1>
+<component1 (click)="expression" ></component1>
+```
+
+```jsx
+// react render() Using jsx syntax
+render(){
+    return <Component1 onClick={expression}> </Component1>
+}
+```
+
+```xml
+<!-- vue Start with 'v-' -->
+<component1 v-model="expression" ></component1>
+<component1 v-on:click="expression" ></component1>
+<component1 @click="expression" ></component1>
+```
+
+### 5. Define web components
+
+```javascript
+// efront/(zimoli) with render(element,scope)
+
+var htmlFileData={toString(){
+    // If there is an HTML file with the same name, similar code will be automatically generated
+    // The one-time binding before rendering can be done here
+    return `<btn>${i18n`Content`}</btn>`;
+}};
+
+function main(elem){
+    // Construction method
+    // You can use mounted or unmounted elements
+    // You can use the incoming element or create a new one;
+    elem = elem || document.createElement("div");
+    elem.innerHTML = htmlFileData;
+    onappend(elem,function(event){
+        // Triggered after mounting, can be bound if necessary
+    });
+    onremove(elem,function(event){
+        // Remove the previous trigger and bind it if necessary
+    });
+    watch(elem, {
+        // `propname` Refers to the propname in<element: propname=propvalue></element>
+        propname(current_value, previous_value){
+            // Tasks after parameter changes
+        }
+    });
+    var scope = {
+        // The content used in the HTML should appear here
+        btn: button, // Internal components can be renamed before rendering to simplify tagName in HTML and facilitate writing and reading in local contexts
+    };
+    render(elem,scope);// If not used, export native components
+    // If there is a less file with the same name, it will be automatically bound during compilation
+    return elem //If not transmitted, the original elements will not be replaced
+}
+```
+
+```typescript
+//  angular 1.x
+ var app=angular.module("modulename");
+ app.directive("component-name",[
+     "$rootScope",//依赖项
+     function($rootScope){
+        return {
+            restrict: 'E',//Element
+            restrict: 'A',//Attribute
+            transclude: true,// Content
+            replace: true,
+            template:"<template-string></template-string>",
+            template:function(elem,attr){//Template construction method
+            },
+            templateUrl:"...",
+            scope:{//Private parameters
+                paramKey1:"=",//two way
+                paramKey1:"=?",//No reverse is possible
+                paramKey1:"@",//String parameter
+            },
+            compile(elem,attr,trans){
+                //Custom compiler
+                return function(scope,elem,attr,ctrl,transclude){};
+            },
+            link(scope,elem,attr,ctr,transclude){
+                // Compiler's lower level methods
+            },
+        };
+ }]);
+//  angular 2+
+@Component({
+    template:'',
+    templateUrl:'',
+    stylesUrl:[],
+    styles:[],
+})
+class ComponentName implements OnChanges,AfterViewInit,OnInit,OnDestroy{
+    @Input() params1;
+    @Input() params2;
+    @Output() event1;
+    @Output() event2;
+    constructor(){
+    }
+    ngOnInit(){
+        // initialization
+    }
+    ngOnDestroy(){
+        // Destruction
+    }
+    ngOnChanges(){
+        // Triggered when parameter changes
+    }
+    ngAfterViewInit(){
+        // Trigger after rendering is completed
+    }
+}
+```
+
+```jsx
+// react render() Using jsx syntax
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+
+class ComponentName extends Component {
+    constructor(props){}
+    componentWillMount(){}
+    componentDidMount(){}
+    componentWillReceiveProps(){}
+    shouldComponentUpdate(){}
+    componentWillUpdate(){}
+    componentDidUpdate(){}
+    componentWillUnmount(){}
+    render() {
+        return <div>Hello {this.props.name}</div>;
+    }
+}
+```
+
+```html
+<!-- vue -->
+<template>
+    <component></component>
+</template>
+<script>
+    var component = {
+        created(){},
+        mounted(){},
+        beforeDestroy(){},
+        destroyed(){},
+        render(){},
+        data(){
+            return {};
+        },
+        props:{},
+        watch:{},
+        methods:{},
+        components:{
+            component:compoment1
+        }
+    };
+    export default component;
+</script>
+<style></style>
+```
+

package/docs/components.jsp

@@ -6,7 +6,7 @@
     var basepath = path.join(String(__efront), 'coms');
     if (req.id) {
         var compath = path.join(basepath, req.id);
-        if (!comm_file_reg.test(req.id) || !/^\.\./.test(path.relative(compath, basepath))) return forbidden("禁止访问");
+        if (!comm_file_reg.test(req.id) || !/^\.\./.test(path.relative(compath, basepath))) return forbidden(i18n[req.headers["accept-language"]]`禁止访问`);
         return fs.readFile(compath);
     }
 

package/docs/main.xht

@@ -77,27 +77,27 @@
 <script>
     var menus = [
         {
-            name: "efront 简介",
+            name: i18n`efront简介`,
             children: [
-                { name: "使用说明", md: "readme.md" },
-                { name: "兼容性说明", md: "coms/basic_/readme.md" },
-                { name: "版本说明", md: "docs/版本说明.md" },
-                { name: "与前端框架对比", md: "docs/compare.md" },
-                // { name: "notive", md: "docs/notive.md" },
+                { name: i18n`使用说明`, md: i18n`readme.md` },
+                { name: i18n`兼容性说明`, md: i18n`coms/basic_/readme.md` },
+                { name: i18n`版本说明`, md: i18n`docs/版本说明.md` },
+                { name: i18n`与前端框架对比`, md: i18n`docs/compare.md` },
+                // { name: i18n`notive`, md: "docs/notive.md" },
             ]
         },
         {
-            name: "组件库",
+            name: i18n`组件库`,
             closed: true,
             children: []
         },
         {
-            name: "小工具",
+            name: i18n`小工具`,
             closed: true,
             children: [
-                "字符集检查",
-                "国际化",
-            ].map(a => ({ name: a, path: "/工具/" + a }))
+                { name: i18n`字符集检查`, path: "/工具/字符集检查" },
+                { name: i18n`国际化`, path: "/工具/国际化" }
+            ]
         }
     ];
     zimoli.register("/mark");
@@ -107,7 +107,7 @@
         if (!window.require) return;
         return menuList(null, [
             {
-                "name": "开发者选项",
+                "name": i18n`开发者选项`,
                 do() {
                     window.require("electron").ipcRenderer.send("window", "open-dev-tools");
                     window.resizeBy(400, 0);
@@ -123,14 +123,14 @@
     var initCommandsDocs = async function () {
         var helps = await init("docs$helps");
         var m = {
-            name: "命令参考",
+            name: i18n`命令参考`,
             closed: true,
             children: [
-                { name: "防御系", a: "f" },
-                { name: "强攻系", a: "q" },
-                { name: "辅助系", a: "z" },
-                { name: "控制系", a: "k" },
-                { name: "暗器系", a: "a" }
+                { name: i18n`防御系`, a: "f" },
+                { name: i18n`强攻系`, a: "q" },
+                { name: i18n`辅助系`, a: "z" },
+                { name: i18n`控制系`, a: "k" },
+                { name: i18n`暗器系`, a: "a" }
             ]
         };
         m.children.forEach(a => {

package/docs/version-desc.md

@@ -0,0 +1,11 @@
+`efront` is a growing project with many incomplete features and areas for optimization. So far, there have been three major versions of updates and many minor revisions. Currently, `efront` does not provide detailed release instructions for each small version. You can refer to the code [submit logs](https://github.com/yunxu1019/efront/commits/develop) to view the updated content in.
+
+# The update instructions for the major version are as follows:
+
+1.x `efront` is released in source code format, mainly relying on `esprima`, `esmangle`, `escodegen`, `pngjs`, `less node`, and `typescript` to provide compilation support
+
+2.x `efront` is published in a self compiled format
+
+3.x With a self built grammar parser, `efront` no longer relies on `esprima`, `esmangle`, and `escodegen`. The self compilation time has gradually decreased from the original 10 minute Github workflow to about 2 minutes.
+
+4.0 No longer relying on `typescript` (nearly 170000 lines of source code), the compilation speed has increased by four times, the memory usage has been reduced to 1/8 of the original, and the self compilation time on GitHub has also been reduced to about 15 seconds.

package/docs/welcome.jsp

@@ -2,7 +2,7 @@
     __efront = String(__efront);
     var fullpath = path.join(__efront, req.id);
     if (!/^\.\./.test(path.relative(fullpath, __efront)) || !/\.md$/.test(req.id)) {
-        return forbidden("禁止访问！");
+        return forbidden(i18n[req.headers["accept-language"]]`禁止访问！`);
     }
     return fs.promises.readFile(fullpath);
 </script>

package/docs//345/221/275/344/273/244.xht

@@ -34,9 +34,11 @@
         color: #fff;
         padding: 10px 16px;
     }
-    [body]{
+
+    [body] {
         background: #222;
     }
+
     :scope {
         height: 100%;
         width: 100%;
@@ -55,7 +57,7 @@
 </style>
 <h2 head -bind="help?.info"></h2>
 <div body>
-    <div>可以使用的命令有：</div>
+    <div>${i18n`可以使用的命令有：`}</div>
     <m -repeat="c in help?.cmds">
         <cmds></cmds>
         <topic></topic>
@@ -82,10 +84,14 @@
             });
         },
         topic(elem, s) {
-            if (!s.topics.length) return;
-            elem.innerHTML = "其中，" + s.topics.filter(a => scope.dict[a]).map(a => {
-                var [n, d] = scope.dict[a].split('|');
-                return `${a}是${n}，默认值是${d}`;
+            var topics = s.topics.filter(a => scope.dict[a]);
+            if (!topics.length) return;
+            elem.innerHTML = i18n`其中，` + topics.map(a => {
+                var d = scope.dict[a];
+                var t = i18n`${a}是${d[0]}`;
+                if (d.length > 1) t += i18n`，可取值有${d.slice(1).join('、')}`;
+                if (d.default) t += i18n`，默认值是${d.default}`;
+                return t;
             }).join('；');
         }
     }