vsn 0.1.51 → 0.1.54

package/README.md

@@ -1,3 +1,5 @@
+[![npm version](https://badge.fury.io/js/vsn.svg)](https://badge.fury.io/js/vsn) [![Build Status](https://travis-ci.org/malero/vsn.svg?branch=master)](https://travis-ci.org/malero/vsn) [![codecov](https://codecov.io/gh/malero/vsn/branch/master/graph/badge.svg)](https://codecov.io/gh/malero/vsn) [![npm](https://img.shields.io/npm/dw/vsn.svg)]() [![gzip bundle size](http://img.badgesize.io/https://unpkg.com/vsn@latest/dist/?compression=gzip&style=flat-square)](https://unpkg.com/vsn)
+
 # VisionJS Framework
 
 Simple Javascript Framework built from the ground up with eCommerce and SEO in mind. VisionJS is meant to be used with server side rendered websites. Rather than dynamically rendering component templates like most javascript frameworks, VisionJS uses the html rendered by your server to add functionality to your website.
@@ -8,60 +10,6 @@ Use NPM to install VisionJS with the following command:
     npm i vsn
 
 
-## Examples
-### Set A Scope Variable
-Use `vsn-set:variable_name="value|type"` to set a variable in the scope. `vsn-set` is only used to initialize a value and will only be evaluated once. Use `vsn-bind` if you would like to bind the element to the scope variable.
-
-    <div vsn-set:my_string="42"></div>
-    <div vsn-set:my_int="42|int"></div>
-    <div vsn-set:my_float="42.3|float"></div>
-    <div vsn-set:my_bool="false|bool"></div>
-
-
-### Attribute Binding
-Use `vsn-bind:attribute` to bind a scope variable to the element's attribute. Using `vsn-bind` on an input will bind the input's value to the scope variable. 
-
-    <a href="/index.html" id="link">Home</a>
-    <input type="text" vsn-bind="#link.@text" />
-    <input type="text" vsn-bind="#link.@href" />
-
-
-### Bind to Element Events
-Use `vsn-on` on an element to execute some code when the specified event is triggered. Here we have a button that toggles the root scope variable `show` between false and true when the element is clicked. 
-
-    <button vsn-on:click="show = !show" vsn-set:show="false|bool">Toggle</button>
-    <span vsn-bind="show"></span>
-
-
-### Conditional Elements
-Use `vsn-if` if you would only like to show an element if a certain condition is met.
-
-    <button vsn-on:click="show = !show" vsn-set:show="false|bool">Toggle</button>
-    <span vsn-if="show">Show is true</span>
-    <span vsn-if="!show">Show is false</span>
-
-
-### Controllers
-Use `vsn-controller:variable_name="ClassName"` to bind an element to a controller class.
-
-Typescript class controller:
-
-    class Controller {
-        public on: boolean = false;
-
-        doSomething($event, value) {
-            $event.preventDefault();
-            this.on = value;            
-        }
-    }
-    vision.registerClass(Controller, 'Controller');
-
-HTML to use the above controller:
-
-    <div vsn-controller:controller="Controller">
-        <span vsn-if="controller.on">It's on!</span>
-        <span vsn-if="!controller.on">It's off...</span>
-        <a href="/" vsn-on:click="controller.doSomething($event, !controller.on)">Click Me</a>
-    </div>
+## Usage
 
-Note: `variable_name` cannot contain capitalized letters. Use `<tag vsn-controller="ClassName" vsn-name="variableName" />` if you need to use capitalized letters in your controller name.
+Please visit the [docs](https://www.vsnjs.org) for more information.

package/dist/attributes/ScopeAttribute.d.ts

@@ -1,5 +1,9 @@
 import { Attribute } from "../Attribute";
+import { Tree } from "../AST";
 export declare class ScopeAttribute extends Attribute {
     static readonly canDefer: boolean;
     static readonly scoped: boolean;
+    protected tree: Tree;
+    compile(): Promise<void>;
+    extract(): Promise<void>;
 }

package/dist/attributes/ScopeAttribute.js

@@ -20,15 +20,90 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScopeAttribute = void 0;
 var Attribute_1 = require("../Attribute");
 var Registry_1 = require("../Registry");
+var AST_1 = require("../AST");
+var Scope_1 = require("../Scope");
 var ScopeAttribute = /** @class */ (function (_super) {
     __extends(ScopeAttribute, _super);
     function ScopeAttribute() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    ScopeAttribute.prototype.compile = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.tree = new AST_1.Tree(this.getAttributeValue());
+                        return [4 /*yield*/, this.tree.prepare(this.tag.scope, this.tag.dom, this.tag)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, _super.prototype.compile.call(this)];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ScopeAttribute.prototype.extract = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var value, _i, _a, key;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag)];
+                    case 1:
+                        value = _b.sent();
+                        if (!(value instanceof Scope_1.Scope)) {
+                            throw new Error("Scope value must be an object, got " + typeof value);
+                        }
+                        for (_i = 0, _a = value.data.keys; _i < _a.length; _i++) {
+                            key = _a[_i];
+                            this.tag.scope.set(key, value.data[key]);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     ScopeAttribute.canDefer = false;
     ScopeAttribute.scoped = true;
     ScopeAttribute = __decorate([

package/dist/attributes/ScopeAttribute.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScopeAttribute.js","sourceRoot":"","sources":["../../src/attributes/ScopeAttribute.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAAuC;AACvC,wCAAqC;AAGrC;IAAoC,kCAAS;IAA7C;;IAGA,CAAC;IAF0B,uBAAQ,GAAY,KAAK,CAAC;IAC1B,qBAAM,GAAY,IAAI,CAAC;IAFrC,cAAc;QAD1B,mBAAQ,CAAC,SAAS,CAAC,WAAW,CAAC;OACnB,cAAc,CAG1B;IAAD,qBAAC;CAAA,AAHD,CAAoC,qBAAS,GAG5C;AAHY,wCAAc"}
+{"version":3,"file":"ScopeAttribute.js","sourceRoot":"","sources":["../../src/attributes/ScopeAttribute.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAAuC;AACvC,wCAAqC;AACrC,8BAA4B;AAC5B,kCAA+B;AAG/B;IAAoC,kCAAS;IAA7C;;IAoBA,CAAC;IAfgB,gCAAO,GAApB;;;;;wBACI,IAAI,CAAC,IAAI,GAAG,IAAI,UAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;wBAC/C,qBAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,EAAA;;wBAA/D,SAA+D,CAAC;wBAChE,qBAAM,iBAAM,OAAO,WAAE,EAAA;;wBAArB,SAAqB,CAAC;;;;;KACzB;IAEY,gCAAO,GAApB;;;;;4BACkB,qBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,EAAA;;wBAAxE,KAAK,GAAG,SAAgE;wBAC9E,IAAI,CAAC,CAAC,KAAK,YAAY,aAAK,CAAC,EAAE;4BAC3B,MAAM,IAAI,KAAK,CAAC,wCAAsC,OAAO,KAAO,CAAC,CAAC;yBACzE;wBACD,WAAiC,EAAf,KAAA,KAAK,CAAC,IAAI,CAAC,IAAI,EAAf,cAAe,EAAf,IAAe,EAAE;4BAAxB,GAAG;4BACV,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;yBAC5C;;;;;KACJ;IAlBsB,uBAAQ,GAAY,KAAK,CAAC;IAC1B,qBAAM,GAAY,IAAI,CAAC;IAFrC,cAAc;QAD1B,mBAAQ,CAAC,SAAS,CAAC,WAAW,CAAC;OACnB,cAAc,CAoB1B;IAAD,qBAAC;CAAA,AApBD,CAAoC,qBAAS,GAoB5C;AApBY,wCAAc"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "vsn",
-  "version": "0.1.51",
+  "version": "0.1.54",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
-    "typescript"
+    "typescript",
+    "html",
+    "ajax",
+    "hateoas",
+    "rest",
+    "seo"
   ],
   "main": "./dist/vsn.js",
   "scripts": {

package/src/Tag.ts

@@ -250,6 +250,9 @@ export class Tag extends DOMObject {
         if (!!this._scope)
             return this._scope;
 
+        if (this.uniqueScope)
+            return this.createScope();
+
         if (!!this._parentTag)
             return this._parentTag.scope;
 
@@ -432,7 +435,6 @@ export class Tag extends DOMObject {
 
         if (requiresScope && !this.uniqueScope) {
             this._uniqueScope = true;
-            this._scope = new Scope();
         }
 
         this._state = TagState.AttributesBuilt;
@@ -569,17 +571,21 @@ export class Tag extends DOMObject {
         }
     }
 
-    public createScope() {
+    public createScope(force: boolean = false): Scope {
         // Standard attribute requires a unique scope
         // @todo: Does this cause any issues with attribute bindings on the parent scope prior to having its own scope? hmm...
-        if (!this.uniqueScope) {
+        if ((!this.uniqueScope && force) || this.uniqueScope) {
             this._uniqueScope = true;
             this._scope = new Scope();
 
             if (this.parentTag) {
                 this.scope.parentScope = this.parentTag.scope;
             }
+
+            return this._scope;
         }
+
+        return null;
     }
 
     async watchAttribute(attributeName: string) {
@@ -589,7 +595,7 @@ export class Tag extends DOMObject {
             }
         }
 
-        this.createScope();
+        this.createScope(true);
 
         const standardAttribute = new StandardAttribute(this, attributeName);
         this.attributes.push(standardAttribute);
@@ -605,7 +611,7 @@ export class Tag extends DOMObject {
             }
         }
 
-        this.createScope();
+        this.createScope(true);
 
         const styleAttribute = new StyleAttribute(this, 'style');
         this.attributes.push(styleAttribute);

package/src/attributes/ScopeAttribute.ts

@@ -1,8 +1,33 @@
 import {Attribute} from "../Attribute";
 import {Registry} from "../Registry";
+import {Tree} from "../AST";
+import {Scope} from "../Scope";
 
 @Registry.attribute('vsn-scope')
 export class ScopeAttribute extends Attribute {
     public static readonly canDefer: boolean = false;
     public static readonly scoped: boolean = true;
+    protected tree: Tree;
+
+    public async compile() {
+        const code = this.getAttributeValue();
+        if (code) {
+            this.tree = new Tree(code);
+            await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        }
+        await super.compile();
+    }
+
+    public async extract() {
+        if (this.tree) {
+            const value = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
+            if (!(value instanceof Scope)) {
+                throw new Error(`vsn-scope value must be an object, got ${typeof value}`);
+            }
+            for (const key of value.data.keys) {
+                this.tag.scope.set(key, value.data[key]);
+            }
+        }
+        await super.extract();
+    }
 }

package/test/attributes/ScopeAttribute.spec.ts

@@ -0,0 +1,35 @@
+import {DOM} from "../../src/DOM";
+import "../../src/Types";
+import "../../src/attributes/_imports";
+
+
+describe('ScopeAttribute', () => {
+    it("vsn-scope should set simple values correctly", (done) => {
+        document.body.innerHTML = `
+            <div vsn-scope="{'asd':123, 'sdf': 'asd'}">
+                <span vsn-bind="asd"></span>
+            </div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const element = (await dom.exec('?(div)'))[0];
+            expect(element.scope.get('asd')).toBe(123);
+            expect(element.scope.get('sdf')).toBe('asd');
+            const span = (await element.exec('?>(:first-child)'))[0];
+            expect(span.element.innerText).toBe('123');
+            done();
+        });
+    });
+
+    it("vsn-scope should allow empty value to create a scope", (done) => {
+        document.body.innerHTML = `
+            <div vsn-scope></div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const element = (await dom.exec('?(div)'))[0];
+            expect(element.uniqueScope).toBe(true);
+            done();
+        });
+    });
+});