Merge pull request #13 from zttonly/dev

增加trimWhitespace等模板属性设置

index.js

@@ -127,6 +127,19 @@ export function template(tpl) {
     }
 };
 
+/**
+ * template配置项
+ *
+ * @param {Object} 组件的模板配置项，包括：trimWhitespace、delimiters、autoFillStyleAndId
+ */
+export function templateOptions({trimWhitespace, delimiters, autoFillStyleAndId}) {
+    if (context.creator) {
+        context.trimWhitespace = trimWhitespace;
+        context.delimiters = delimiters;
+        context.autoFillStyleAndId = autoFillStyleAndId;
+    }
+};
+
 /**
  * 组件数据的代理类
  * @class DataProxy
@@ -602,5 +615,9 @@ export function defineComponent(creator, san) {
         ComponentClass.prototype.components = defineContext.components;
     }
 
+    ComponentClass.prototype.trimWhitespace = defineContext.trimWhitespace;
+    ComponentClass.prototype.delimiters = defineContext.delimiters;
+    ComponentClass.prototype.autoFillStyleAndId = defineContext.autoFillStyleAndId;
+
     return ComponentClass;
 };

test/lib/sca.js

@@ -1,5 +1,6 @@
 const {
     template,
+    templateOptions,
     data,
     computed,
     messages,

test/templateOptions.spec.js

@@ -0,0 +1,96 @@
+describe('[templateOptions]: ', () => {
+    const list = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
+    const color = 'red';
+
+    it('using default templateOptions', function () {
+        const MyComponent = defineComponent(context => {
+            template`
+                <div>
+                    <span title="{{color}}">{{color}}</span>
+                    <div id="listWrap">
+                        <div s-for="item in list">{{item}}</div>
+                    </div>
+                </div>
+            `;
+            onAttached(() => {
+                expect(context.component.aNode.props.length).toBe(3);
+            });
+        }); 
+        const myComponent = new MyComponent({data: {list, color}});
+        const wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        let listWrap = document.getElementById('listWrap').childNodes;
+        expect(listWrap.length).toBe(list.length + 3);
+        expect(listWrap[0].nodeType).toBe(3);
+
+        myComponent.dispose();
+        document.body.removeChild(wrap);
+    });
+    it('setting templateOptions.trimWhitespace to all', function () {
+        let MyComponent = defineComponent(() => {
+            template`
+                <div id="listWrap">
+                    <div s-for="item in list">{{item}}</div>
+                </div>
+            `;
+            templateOptions({trimWhitespace: 'all'});
+        });
+        const myComponent = new MyComponent({data: {list}});
+        const wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        let listWrap = document.getElementById('listWrap').childNodes;
+        expect(listWrap.length).toBe(list.length + 1);
+        expect(listWrap[0].nodeType).toBe(1);
+
+        myComponent.dispose();
+        document.body.removeChild(wrap);
+    });
+
+    it('setting templateOptions.trimWhitespace to all', function () {
+        let MyComponent = defineComponent(() => {
+            template`<span title="{%color%}">{%color%}</span>`;
+            templateOptions({delimiters: ['{%', '%}']});
+        });
+        const myComponent = new MyComponent({data: {color}});
+
+        const wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        let span = wrap.getElementsByTagName('span')[0];
+        expect(span.title).toBe('red');
+
+        myComponent.dispose();
+        document.body.removeChild(wrap);
+    });
+
+    it('setting templateOptions.autoFillStyleAndId to false', function () {
+        let MyComponent = defineComponent(context => {
+            template`
+                <div>
+                    <span title="{{color}}">{{color}}</span>
+                    <div id="listWrap">
+                        <div s-for="item in list">{{item}}</div>
+                    </div>
+                </div>
+            `;
+            templateOptions({autoFillStyleAndId: false});
+            onAttached(() => {
+                console.log(context.component.aNode.props)
+                expect(context.component.aNode.props.length).toBe(0);
+            });
+        });
+
+        const myComponent = new MyComponent({data: {list, color}});
+        const wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        myComponent.dispose();
+        document.body.removeChild(wrap);
+    });
+});

types/index.d.ts

@@ -26,6 +26,11 @@ export declare function defineComponent<
 
 export declare function template(tpl: string): void;
 export declare function template(tpl: TemplateStringsArray, ...args: string[]): void;
+export declare function templateOptions(options: {
+    trimWhitespace?: string,
+    delimiters?: string,
+    autoFillStyleAndId?: string
+}): void;
 
 type Get<T, K> = K extends `${infer L}.${infer R}`
     ? L extends keyof T