vsn 0.1.52 → 0.1.53

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)]()
+
 # 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://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,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",

package/test/attributes/ScopeAttribute.spec.ts

@@ -4,7 +4,7 @@ import "../../src/attributes/_imports";
 
 
 describe('ScopeAttribute', () => {
-    it("vsn-styles to just work", (done) => {
+    it("vsn-scope should set simple values correctly", (done) => {
         document.body.innerHTML = `
             <div vsn-scope="{'asd':123, 'sdf': 'asd'}">
                 <span vsn-bind="asd"></span>