arale-templatable - npm Package Compare versions

Comparing version 0.10.1 to 1.0.0

examples/index.md

@@ -6,3 +6,3 @@ # 基本的事件操作
 ---
-
+<script type="text/javascript" src="https://a.alipayobjects.com/jquery/jquery/1.7.2/jquery.js"></script>
 <style>
@@ -56,41 +56,43 @@ .markdown-body .widget {
 ````js
-seajs.use(['widget', 'templatable', 'handlebars', '$'], function(Widget, Templatable, Handlebars, $) {
 
-    var WidgetB = Widget.extend({
+var Widget = require('arale-widget');
+var Templatable = require('arale-templatable');
+var $ = require('jquery');
+var WidgetB = Widget.extend({
 
-        Implements: Templatable,
+    Implements: Templatable,
 
-        attrs: {
-            template: '<div id="b" class="widget"><h3>{{title}}</h3><p>{{content}}</p></div>',
+    attrs: {
+        template: '<div id="b" class="widget"><h3>{{title}}</h3><p>{{content}}</p></div>',
 
-            model: {
-                title: '我是默认标题',
-                content: '我是默认内容'
-            },
+        model: {
+            title: '我是默认标题',
+            content: '我是默认内容'
         },
+    },
 
-        events: {
-            'click': 'animate'
-        },
+    events: {
+        'click': 'animate'
+    },
 
-        animate: function() {
-            this.$('p').slideToggle('slow');
-        },
+    animate: function() {
+        this.$('p').slideToggle('slow');
+    },
 
-        setup: function() {
-            this.$('p').css({
-                'height': 100,
-                'padding': 20,
-                'backgroundColor': '#eee'
-            });
-        }
-    });
+    setup: function() {
+        this.$('p').css({
+            'height': 100,
+            'padding': 20,
+            'backgroundColor': '#eee'
+        });
+    }
+});
 
-    var b = new WidgetB({
-        model: {
-            content: '我是传入的内容，点击我试试'
-        },
-        parentNode: '#example2'
-    }).render();
-});
+new WidgetB({
+    model: {
+        content: '我是传入的内容，点击我试试'
+    },
+    parentNode: '#example2'
+}).render();
+
 ````
@@ -118,69 +120,71 @@
 ````js
-seajs.use(['widget', 'templatable', 'handlebars', '$'], function(Widget, Templatable, Handlebars, $) {
+window.jQuery = require('spm-jquery');
+var $ = window.jQuery;
+var Widget = require('arale-widget');
+var Templatable = require('arale-templatable');
+var Handlebars = require('handlebars')['default'];
+var WidgetC = Widget.extend({
 
-    var WidgetC = Widget.extend({
+    Implements: Templatable,
 
-        Implements: Templatable,
+    events: {
+        'click li .remove': 'remove',
+        'click h3': 'toggle',
+        'mouseenter ul': 'focus',
+        'mouseleave ul': 'blur'
+    },
 
-        events: {
-            'click li .remove': 'remove',
-            'click h3': 'toggle',
-            'mouseenter ul': 'focus',
-            'mouseleave ul': 'blur'
-        },
+    templateHelpers: {
+        'list': function(items) {
+            var out = '';
 
-        templateHelpers: {
-            'list': function(items) {
-                var out = '';
-
-                for (var i = 0, len = items.length; i < len; i++) {
-                    var item = items[i];
-                    out += '<li>' + item.text +
-                           '<a href="#" class="remove">X</a></li>';
-                }
-
-                return new Handlebars.SafeString(out);
+            for (var i = 0, len = items.length; i < len; i++) {
+                var item = items[i];
+                out += '<li>' + item.text +
+                       '<a href="#" class="remove">X</a></li>';
             }
-        },
 
-        remove: function(event) {
-            event.preventDefault();
-            $(event.target).parent().remove();
-        },
+            return new Handlebars.SafeString(out);
+        }
+    },
 
-        toggle: function() {
-            this.$('ul').slideToggle('slow');
-        },
+    remove: function(event) {
+        event.preventDefault();
+        $(event.target).parent().remove();
+    },
 
-        focus: function() {
-            this.$('ul').css('backgroundColor', '#eee');
-        },
+    toggle: function() {
+        this.$('ul').slideToggle('slow');
+    },
 
-        blur: function() {
-            this.$('ul').css('backgroundColor', '');
-        },
+    focus: function() {
+        this.$('ul').css('backgroundColor', '#eee');
+    },
 
-        setup: function() {
-            this.element.attr('style', this.get('style'));
-            this.element.addClass(this.get('className'));
-        }
+    blur: function() {
+        this.$('ul').css('backgroundColor', '');
+    },
 
-    });
+    setup: function() {
+        this.element.attr('style', this.get('style'));
+        this.element.addClass(this.get('className'));
+    }
 
-    var c = new WidgetC({
-        className: 'widget',
-        titleClassName: 'title',
-        style: 'width: 350px',
-        model: {
-            title: "设计原则（点击我）",
-            items: [
-                { "text": "开放：开源开放，海纳百川。（悬浮上来）" },
-                { "text": "简单：如无必要，勿增实体。" },
-                { "text": "易用：一目了然，容易学习。" }
-            ]
-        },
-        template: $('#template-c').html(),
-        parentNode: '#example3'
-    }).render();
 });
+
+new WidgetC({
+    className: 'widget',
+    titleClassName: 'title',
+    style: 'width: 350px',
+    model: {
+        title: "设计原则（点击我）",
+        items: [
+            { "text": "开放：开源开放，海纳百川。（悬浮上来）" },
+            { "text": "简单：如无必要，勿增实体。" },
+            { "text": "易用：一目了然，容易学习。" }
+        ]
+    },
+    template: $('#template-c').html(),
+    parentNode: '#example3'
+}).render();
 ````

examples/performance.md

@@ -12,33 +12,37 @@ # 性能测试
 ````javascript
-seajs.use(['$', 'widget', 'templatable'], function($, Widget, Templatable) {
-    var MyWidget = Widget.extend({
-        Implements: Templatable,
-        template: '<p>{{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}}</p>'
-    });
+window.jQuery = require('spm-jquery');
+var $ = window.jQuery;
+var Widget = require('arale-widget');
+var Templatable = require('arale-templatable');
+// var Templatable = require('../dist/arale-templatable/1.0.0/index');
 
-    $(function() {
-        var $console = $('#console-div');
-        var $container = $('#container');
-        $('#btn').click(function() {
-            var startTime = (new Date()).getTime();
-            $console.append('start: ' + startTime + '<br/>');
+var MyWidget = Widget.extend({
+    Implements: Templatable,
+    template: '<p>{{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}} - {{a}}</p>'
+});
 
-            var w;
+$(function() {
+    var $console = $('#console-div');
+    var $container = $('#container');
+    $('#btn').click(function() {
+        var startTime = (new Date()).getTime();
+        $console.append('start: ' + startTime + '<br/>');
 
-            for (var i = 0; i < 20; i++) {
-                w = new MyWidget({
-                    model: {
-                        a: i
-                    },
-                    parentNode: $container
-                });
-                w.render();
-            }
+        var w;
 
-            var endTime = (new Date()).getTime();
-            $console.append('end: ' + endTime + '<br/>');
-            $console.append('total cost: ' + (endTime - startTime) + '<br/>');
-        });
+        for (var i = 0; i < 20; i++) {
+            w = new MyWidget({
+                model: {
+                    a: i
+                },
+                parentNode: $container
+            });
+            w.render();
+        }
+
+        var endTime = (new Date()).getTime();
+        $console.append('end: ' + endTime + '<br/>');
+        $console.append('total cost: ' + (endTime - startTime) + '<br/>');
     });
 });
 ````

HISTORY.md

 # History
 
 ---
+## 1.0.0
+`CHANGED` 升级到 spm@3.9，发布为npm源
 
 ## 0.10.0
 
-`CHANGED` 升级到 spm@3.x
+`CHANGED` 升级到 spm@3.6
 
@@ -9,0 +11,0 @@ ## 0.9.2

package.json

 {
   "name": "arale-templatable",
-  "version": "0.10.1",
+  "version": "1.0.0",
   "description": "处理组件的模板渲染，混入到 Widget 中使用。",
@@ -24,22 +24,31 @@ "keywords": [
     "engines": {},
-    "buildArgs": "--ignore jquery"
+    "build": {
+      "global": {
+        "jquery": "jQuery"
+      }
+    }
   },
-  "main": "src/templatable.js",
+  "main": "index.js",
+  "entry": {
+    "index": "./index.js"
+  },
   "dependencies": {
-    "spm-jquery": "1.7.2",
-    "spm-handlebars": "~1.3.0"
+    "handlebars": "~3.0.0"
   },
   "devDependencies": {
-    "arale-widget": "1.2.0",
-    "spm-handlebars-runtime": "~1.3.0",
-    "spm-expect.js": "0.3.1",
-    "spm-webpack": "~1.0.0"
+    "arale-widget": "~1.2.1",
+    "atool-build": "~0.4.3",
+    "atool-test": "~0.2.9",
+    "handlebars-runtime": "~1.0.12",
+    "jquery": "1.7.2",
+    "karma-sinon-expect": "~0.1.4",
+    "spm-jquery": "1.7.2"
   },
   "scripts": {
-    "build": "spm-webpack -c"
+    "build": "atool-build -o ./dist/${npm_package_family}/${npm_package_name}/${npm_package_version}",
+    "test": "./node_modules/.bin/atool-test --assert expectjs"
   },
   "engines": {
     "node": ">=4.0.0"
-  },
-  "publishConfig": {}
+  }
 }

README.md

@@ -5,2 +5,3 @@ # Templatable
 
+[![spm package](http://spmjs.io/badge/arale-templatable)](http://spmjs.io/package/arale-templatable)
 [![Build Status](https://travis-ci.org/aralejs/templatable.png?branch=master)](https://travis-ci.org/aralejs/templatable) [![Coverage Status](https://coveralls.io/repos/aralejs/templatable/badge.png?branch=master)](https://coveralls.io/r/aralejs/templatable)
@@ -7,0 +8,0 @@

src/templatable.js

@@ -1,3 +0,3 @@
-var $ = require('spm-jquery');
-var Handlebars = require('spm-handlebars')['default'];
+var $ = require('jquery');
+var Handlebars = require('handlebars')['default'];
 
@@ -4,0 +4,0 @@ var compiledTemplates = {};

tests/a.js

 // <div>{{> testPartials}}</div> 编译后
-var Handlebars = require("spm-handlebars-runtime")['default'],
-  template = Handlebars.template,
-  templates = Handlebars.templates = Handlebars.templates || {};
+const Handlebars = require("handlebars-runtime");
+console.log(Handlebars);
+const template = Handlebars.template;
+const templates = Handlebars.templates = Handlebars.templates || {};
 module.exports = template(function(e, a, t, r, s) {
@@ -6,0 +7,0 @@ this.compilerInfo = [4, ">= 1.0.0"], t = this.merge(t, e.helpers), r = this.merge(r, e.partials), s = s || {};

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23647

increased by2.3%

Dependency count

1

decreased by-50%

Number of package files

12

increased by20%

Lines of code

457

increased by2.93%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

71

increased by1.43%

Worsened metrics

Dev dependency count

7

increased by75%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedhandlebars@~3.0.0

• + Addedalign-text@0.1.4(transitive)

• + Addedcamelcase@1.2.1(transitive)

• + Addedcenter-align@0.1.3(transitive)

• + Addedcliui@2.1.0(transitive)

• + Addeddecamelize@1.2.0(transitive)

• + Addedhandlebars@3.0.8(transitive)

• + Addedis-buffer@1.1.6(transitive)

• + Addedkind-of@3.2.2(transitive)

• + Addedlazy-cache@1.0.4(transitive)

• + Addedlongest@1.0.1(transitive)

• + Addedminimist@0.0.10(transitive)

• + Addedoptimist@0.6.1(transitive)

• + Addedrepeat-string@1.6.1(transitive)

• + Addedright-align@0.1.3(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addeduglify-js@2.8.29(transitive)

• + Addeduglify-to-browserify@1.0.2(transitive)

• + Addedwindow-size@0.1.0(transitive)

• + Addedwordwrap@0.0.2(transitive)

• + Addedyargs@3.10.0(transitive)

• - Removedspm-handlebars@~1.3.0

• - Removedspm-jquery@1.7.2

• - Removedasync@0.2.10(transitive)

• - Removedoptimist@0.3.7(transitive)

• - Removedspm-handlebars@1.3.1(transitive)

• - Removedspm-jquery@1.7.2(transitive)

• - Removeduglify-js@2.3.6(transitive)