"use strict";
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 });
var chai_1 = require("chai");
var utils_1 = require("../utils");
var paperclip_utils_1 = require("paperclip-utils");
describe(__filename + "#", function () {
    it("prevents circular dependencies", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "<import src=\"/module.pc\"  />",
                        "/module.pc": "<import src=\"/entry.pc\"  />"
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    return [3 /*break*/, 5];
                case 4:
                    e_1 = _a.sent();
                    err = e_1;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err.message).to.eql("Circular dependencies are not supported yet.");
                    return [2 /*return*/];
            }
        });
    }); });
    it("dynamic attributes work", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, preview, buffer;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Component\" class=\"primary\" class:alt=\"alt\" class:alt2=\"alt2\">\n          {children}\n        </div>\n\n        <Component />\n        <Component alt />\n        <Component alt2 />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    preview = (_a.sent()).preview;
                    buffer = "" + paperclip_utils_1.stringifyVirtualNode(preview);
                    chai_1.expect(utils_1.cleanHTML(buffer)).to.eql("<div class=\"_80f4925f_primary primary\" data-pc-80f4925f></div><div class=\"_80f4925f_alt alt _80f4925f_primary primary\" data-pc-80f4925f></div><div class=\"_80f4925f_alt2 alt2 _80f4925f_primary primary\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can import keyframes", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result, buffer;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import as=\"ab\" src=\"./module.pc\"  />\n        <style>\n          .rule {\n            animation: ab.a 5s;\n          }\n        </style>\n      ",
                        "/module.pc": "\n        <style>\n          @keyframes a {\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    buffer = "" + utils_1.stringifyLoadResult(result);
                    chai_1.expect(utils_1.cleanHTML(buffer)).to.eql("<style>@keyframes _139cec8e_a { } [class]._80f4925f_rule { animation:_139cec8e_a 5s; }</style>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Doesn't crash if importing module with parse error", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"/module.pc\" />\n\n        <div>\n        </div>\n      ",
                        "/module.pc": "<bad"
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    try {
                        engine.run("/entry.pc");
                    }
                    catch (e) {
                        err = e;
                    }
                    chai_1.expect(err).to.eql({
                        errorKind: "Graph",
                        uri: "/module.pc",
                        info: {
                            kind: "EndOfFile",
                            message: "End of file",
                            location: { start: 0, end: 1 }
                        }
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Doesn't crash if incorrect token is found in tag", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"/module.pc\" />\n\n        <div>\n        </div>\n      ",
                        "/module.pc": "<bad!"
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    try {
                        engine.run("/entry.pc");
                    }
                    catch (e) {
                        err = e;
                    }
                    chai_1.expect(err).to.eql({
                        errorKind: "Graph",
                        uri: "/module.pc",
                        info: {
                            kind: "Unexpected",
                            message: "Unexpected token",
                            location: { start: 4, end: 5 }
                        }
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("displays an error if a default component is used but not exported", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import as=\"module\" src=\"/module.pc\" />\n\n        <module>\n        </module>\n      ",
                        "/module.pc": "nothing to export!"
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    try {
                        engine.run("/entry.pc");
                    }
                    catch (e) {
                        err = e;
                    }
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 58, end: 66 },
                        message: "Unable to find component, or it's not exported."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("displays error if img src not found", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <img src=\"/not/found.png\" />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph, utils_1.noop, {
                            resolveFile: function () {
                                return null;
                            }
                        })];
                case 1:
                    engine = _a.sent();
                    try {
                        engine.run("/entry.pc");
                    }
                    catch (e) {
                        err = e;
                    }
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 19, end: 33 },
                        message: "Unable to resolve file: /not/found.png from /entry.pc"
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    describe("Slots", function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            it("Can render attributes with element bindings", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, preview, buffer;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          <div a={<div />}></div>\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            return [4 /*yield*/, engine.run("/entry.pc")];
                        case 2:
                            preview = (_a.sent()).preview;
                            buffer = "" + paperclip_utils_1.stringifyVirtualNode(preview);
                            chai_1.expect(utils_1.cleanHTML(buffer)).to.eql("<div a=\"[Object object]\" data-pc-80f4925f></div>");
                            return [2 /*return*/];
                    }
                });
            }); });
            xit("Can render text bindings", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, preview, buffer;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          <div component as=\"Component\" {class}>\n            {children}\n          </div>\n  \n          <Component class=\"a\">b</Component>\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            return [4 /*yield*/, engine.run("/entry.pc")];
                        case 2:
                            preview = (_a.sent()).preview;
                            buffer = "" + paperclip_utils_1.stringifyVirtualNode(preview);
                            chai_1.expect(utils_1.cleanHTML(buffer)).to.eql("<div class=\"a\" data-pc-80f4925f>b</div>");
                            return [2 /*return*/];
                    }
                });
            }); });
            xit("Displays an error if text binding is defined outside of component", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, err;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          <a {class}></a>\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            try {
                                engine.run("/entry.pc");
                            }
                            catch (e) {
                                err = e;
                            }
                            chai_1.expect(err).to.eql({
                                kind: "Error",
                                errorKind: "Runtime",
                                uri: "/entry.pc",
                                location: { start: 12, end: 19 },
                                message: "Bindings can only be defined within components."
                            });
                            return [2 /*return*/];
                    }
                });
            }); });
            xit("Displays error for key-value binding outside of component", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, err;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          <a a={class}></a>\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            try {
                                engine.run("/entry.pc");
                            }
                            catch (e) {
                                err = e;
                            }
                            chai_1.expect(err).to.eql({
                                kind: "Error",
                                errorKind: "Runtime",
                                uri: "/entry.pc",
                                location: { start: 14, end: 21 },
                                message: "Bindings can only be defined within components."
                            });
                            return [2 /*return*/];
                    }
                });
            }); });
            xit("Displays error for spread binding outside of component", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, err;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          <a {...class}></a>\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            try {
                                engine.run("/entry.pc");
                            }
                            catch (e) {
                                err = e;
                            }
                            chai_1.expect(err).to.eql({
                                kind: "Error",
                                errorKind: "Runtime",
                                uri: "/entry.pc",
                                location: { start: 12, end: 22 },
                                message: "Bindings can only be defined within components."
                            });
                            return [2 /*return*/];
                    }
                });
            }); });
            xit("Displays error for text binding outside of component", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, err;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          {a}\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            try {
                                engine.run("/entry.pc");
                            }
                            catch (e) {
                                err = e;
                            }
                            chai_1.expect(err).to.eql({
                                kind: "Error",
                                errorKind: "Runtime",
                                uri: "/entry.pc",
                                location: { start: 9, end: 12 },
                                message: "Bindings can only be defined within components."
                            });
                            return [2 /*return*/];
                    }
                });
            }); });
            xit("Displays error for class binding outside of component", function () { return __awaiter(void 0, void 0, void 0, function () {
                var graph, engine, err;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            graph = {
                                "/entry.pc": "\n          <div class:a=\"a\">\n          </div>\n        "
                            };
                            return [4 /*yield*/, utils_1.createMockEngine(graph)];
                        case 1:
                            engine = _a.sent();
                            try {
                                engine.run("/entry.pc");
                            }
                            catch (e) {
                                err = e;
                            }
                            chai_1.expect(err).to.eql({
                                kind: "Error",
                                errorKind: "Runtime",
                                uri: "/entry.pc",
                                location: { start: 14, end: 21 },
                                message: "Bindings can only be defined within components."
                            });
                            return [2 /*return*/];
                    }
                });
            }); });
            return [2 /*return*/];
        });
    }); });
    it("Engine can't reload a file if there's an error", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result, _a, e, err, err2, e_2, result2, _b;
        return __generator(this, function (_c) {
            switch (_c.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        abc\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _c.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.apply(void 0, [_c.sent()]);
                    chai_1.expect(result).to.eql("<style></style> abc");
                    e = utils_1.waitForError(engine);
                    engine.updateVirtualFileContent("/entry.pc", "<a ");
                    return [4 /*yield*/, e];
                case 3:
                    err = _c.sent();
                    chai_1.expect(err).to.eql({
                        kind: "Error",
                        errorKind: "Graph",
                        uri: "/entry.pc",
                        info: {
                            kind: "EndOfFile",
                            message: "End of file",
                            location: { start: 0, end: 1 }
                        }
                    });
                    _c.label = 4;
                case 4:
                    _c.trys.push([4, 6, , 7]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 5:
                    err2 = _c.sent();
                    return [3 /*break*/, 7];
                case 6:
                    e_2 = _c.sent();
                    err2 = e_2;
                    return [3 /*break*/, 7];
                case 7:
                    chai_1.expect(err2).to.eql({
                        errorKind: "Graph",
                        uri: "/entry.pc",
                        info: {
                            kind: "EndOfFile",
                            message: "End of file",
                            location: { start: 0, end: 1 }
                        }
                    });
                    engine.updateVirtualFileContent("/entry.pc", "<a></a>");
                    _b = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 8:
                    result2 = _b.apply(void 0, [_c.sent()]);
                    chai_1.expect(result2).to.eql("<style></style><a data-pc-80f4925f></a>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Engine can't reload content if module errors", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result, _a, err, e_3, result3, _b;
        return __generator(this, function (_c) {
            switch (_c.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import as=\"Component\" src=\"./module.pc\" />\n        <Component>abc</Component>\n      ",
                        "/module.pc": "\n        <div export component as=\"default\">\n          {children} cde\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _c.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.apply(void 0, [_c.sent()]);
                    chai_1.expect(result).to.eql("<style></style><div data-pc-139cec8e>abc cde </div>");
                    // make the parse error
                    return [4 /*yield*/, engine.updateVirtualFileContent("/module.pc", "<div export component as=\"default\">\n    {chi")];
                case 3:
                    // make the parse error
                    _c.sent();
                    return [4 /*yield*/, engine.updateVirtualFileContent("/entry.pc", "<import as=\"Component\" src=\"./module.pc\" />\n    <Component>defg</Component>")];
                case 4:
                    _c.sent();
                    _c.label = 5;
                case 5:
                    _c.trys.push([5, 7, , 8]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 6:
                    _c.sent();
                    return [3 /*break*/, 8];
                case 7:
                    e_3 = _c.sent();
                    err = e_3;
                    return [3 /*break*/, 8];
                case 8:
                    chai_1.expect(err).to.eql({
                        errorKind: "Graph",
                        uri: "/module.pc",
                        info: {
                            kind: "Unterminated",
                            message: "Unterminated slot.",
                            location: { start: 41, end: 44 }
                        }
                    });
                    // introduce fix
                    return [4 /*yield*/, engine.updateVirtualFileContent("/module.pc", "<div export component as=\"default\">\n      cde {children}\n    </div>")];
                case 9:
                    // introduce fix
                    _c.sent();
                    _b = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 10:
                    result3 = _b.apply(void 0, [_c.sent()]);
                    chai_1.expect(result3).to.eql("<style></style><div data-pc-139cec8e>cde defg</div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Errors for incorrectly formatted slot number", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        {10.10.10}\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    try {
                        engine.run("/entry.pc");
                    }
                    catch (e) {
                        err = e;
                    }
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 10, end: 18 },
                        message: "Invalid number."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Entities are encoded", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, _a, _b;
        return __generator(this, function (_c) {
            switch (_c.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        &times;\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _c.sent();
                    _a = chai_1.expect;
                    _b = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    _a.apply(void 0, [_b.apply(void 0, [_c.sent()])]).to.eql("<style></style> ×");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Returns component properties", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" class:a=\"a\" {f} {b} className=\"{c}\">\n          {d}\n          {e?}\n          {f?}\n        </div>\n        <div export component as=\"Test2\">\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(result.exports.components).to.eql({
                        Test: {
                            name: "Test",
                            properties: {
                                c: {
                                    name: "c",
                                    optional: false
                                },
                                e: {
                                    name: "e",
                                    optional: true
                                },
                                a: {
                                    name: "a",
                                    optional: true
                                },
                                b: {
                                    name: "b",
                                    optional: false
                                },
                                f: {
                                    name: "f",
                                    optional: false
                                },
                                d: {
                                    name: "d",
                                    optional: false
                                }
                            },
                            public: false
                        },
                        Test2: {
                            name: "Test2",
                            properties: {},
                            public: true
                        }
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Cannot declare a component twice", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_4;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\">\n        </div>\n        <div export component as=\"Test\">\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    return [3 /*break*/, 5];
                case 4:
                    e_4 = _a.sent();
                    err = e_4;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 58, end: 105 },
                        message: "Component name is already declared."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Throws an error if an imported module has a CSS error", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_5;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <module src=\"/module.pc\">\n      ",
                        "/module.pc": "\n        <style>\n          .a {\n            b {\n              color: blue;\n            }\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    return [3 /*break*/, 5];
                case 4:
                    e_5 = _a.sent();
                    err = e_5;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Graph",
                        uri: "/entry.pc",
                        info: {
                            kind: "Unterminated",
                            message: "Unterminated element.",
                            location: { start: 9, end: 34 }
                        }
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Displays an error if open tag is unclosed", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_6;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div <div />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    engine.getLoadedAst("/entry.pc");
                    return [3 /*break*/, 5];
                case 4:
                    e_6 = _a.sent();
                    err = e_6;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Graph",
                        uri: "/entry.pc",
                        info: {
                            kind: "Unexpected",
                            message: "Unexpected token",
                            location: { start: 14, end: 15 }
                        }
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can apply a class to {className?} without needing $", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, buffer, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" {className}>\n        </div>\n        <Test className=\"ok\" />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _b.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    buffer = _a.apply(void 0, [_b.sent()]);
                    chai_1.expect(buffer).to.eql("<style></style><div className=\"_80f4925f_ok ok\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can apply a class to className={className?} without needing $", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, buffer, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" className={className?}>\n        </div>\n        <Test className=\"ok\" />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _b.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    buffer = _a.apply(void 0, [_b.sent()]);
                    chai_1.expect(buffer).to.eql("<style></style><div className=\"_80f4925f_ok ok\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can apply a class to className=\"a {className?}\" without needing $", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, buffer, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" className=\"a {className?}\">\n        </div>\n        <Test className=\"ok\" />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _b.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    buffer = _a.apply(void 0, [_b.sent()]);
                    chai_1.expect(buffer).to.eql("<style></style><div className=\"_80f4925f_a a _80f4925f_ok ok\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Doesn't apply scope if $ is provided", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, buffer, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"module\" />\n        <module.Test className=\"$ok\" />\n      ",
                        "/module.pc": "\n        <div export component as=\"Test\" className=\"a {className?}\">\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _b.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    buffer = _a.apply(void 0, [_b.sent()]);
                    chai_1.expect(buffer).to.eql("<style></style><div className=\"_139cec8e_a a _80f4925f_ok ok\" data-pc-139cec8e></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    // addresses https://github.com/crcn/paperclip/issues/336
    it("Dynamic styles are ommitted if their associated prop is undefined", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, buffer, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" style=\"--color: {color?}; --background: {background?};\">\n        </div>\n\n        <Test color=\"a\" />\n        <Test background=\"b\" />\n        <Test color=\"a\" background=\"b\" />\n        <Test />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _b.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    buffer = _a.apply(void 0, [_b.sent()]);
                    chai_1.expect(buffer).to.eql("<style></style><div data-pc-80f4925f style=\"--color: a;\"></div><div data-pc-80f4925f style=\"--background: b;\"></div><div data-pc-80f4925f style=\"--color: a; --background: b;\"></div><div data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    // addresses https://github.com/crcn/paperclip/issues/362
    it("Can have class names with underscores in them", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, buffer, _a;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <style>\n          .its_a_match {\n            color: blue;\n          }\n        </style>\n        <div className=\"its_a_match\"></div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _b.sent();
                    _a = utils_1.stringifyLoadResult;
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    buffer = _a.apply(void 0, [_b.sent()]);
                    chai_1.expect(buffer).to.eql("<style>[class]._80f4925f_its_a_match { color:blue; }</style><div className=\"_80f4925f_its_a_match its_a_match\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    xit("Errors if style block isn't defined at the root", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_7;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div>\n          <style>\n          </style>\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    engine.getLoadedAst("/entry.pc");
                    return [3 /*break*/, 5];
                case 4:
                    e_7 = _a.sent();
                    err = e_7;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 25, end: 51 },
                        message: "Style blocks needs to be defined at the root."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    // Addresses https://github.com/crcn/paperclip/issues/299
    it("Errors if component is not defined at the root", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_8;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div>\n          <div component as=\"Test\">\n          </div>\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    engine.getLoadedAst("/entry.pc");
                    return [3 /*break*/, 5];
                case 4:
                    e_8 = _a.sent();
                    err = e_8;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 25, end: 67 },
                        message: "Components need to be defined at the root."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Errors if component defined in element within a slot", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_9;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div test={<div component as=\"blarg\" />}>\n          \n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    engine.getLoadedAst("/entry.pc");
                    return [3 /*break*/, 5];
                case 4:
                    e_9 = _a.sent();
                    err = e_9;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 20, end: 48 },
                        message: "Components need to be defined at the root."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    // Addresses https://github.com/crcn/paperclip/issues/372
    it("Displays an error if a shadow pierce import is missing", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_10;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div className=\"$tw.test\">\n          \n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    return [3 /*break*/, 5];
                case 4:
                    e_10 = _a.sent();
                    err = e_10;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 24, end: 33 },
                        message: "Reference not found."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    // addresses: https://github.com/crcn/paperclip/issues/389
    it("Displays an error if a class name is not found for shadow pierce", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_11;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"tw\" />\n        <div className=\"$tw.test\">\n          \n        </div>\n      ",
                        "/module.pc": "\n        <style>\n\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    return [3 /*break*/, 5];
                case 4:
                    e_11 = _a.sent();
                    err = e_11;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 69, end: 78 },
                        message: "Class name not found."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Display an error if class name is private for shadow pierce", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, err, e_12;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"tw\" />\n        <div className=\"$tw.test\">\n          \n        </div>\n      ",
                        "/module.pc": "\n        <style>\n          .test {\n\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    _a.label = 2;
                case 2:
                    _a.trys.push([2, 4, , 5]);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 3:
                    _a.sent();
                    return [3 /*break*/, 5];
                case 4:
                    e_12 = _a.sent();
                    err = e_12;
                    return [3 /*break*/, 5];
                case 5:
                    chai_1.expect(err).to.eql({
                        errorKind: "Runtime",
                        uri: "/entry.pc",
                        location: { start: 69, end: 78 },
                        message: "This class reference is private."
                    });
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can use a public class pierce", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"tw\" />\n        <div className=\"$tw.test\">\n          \n        </div>\n      ",
                        "/module.pc": "\n        <style>\n          @export {\n            .test {\n              color: blue;\n            }\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._139cec8e_test { color:blue; }</style><div className=\"_139cec8e_test test\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Deprecated >>> works", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"tw\" />\n        <div className=\">>>tw.test\">\n          \n        </div>\n      ",
                        "/module.pc": "\n        <style>\n          @export {\n            .test {\n              color: orange;\n            }\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._139cec8e_test { color:orange; }</style><div className=\"_139cec8e_test test\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can use a public class pierce on a component", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"tw\" />\n        <div export component as=\"Test\" className=\"$tw.test\">\n          \n        </div>\n        <Test />\n      ",
                        "/module.pc": "\n        <style>\n          @export {\n            .test {\n              background: blue;\n            }\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._139cec8e_test { background:blue; }</style><div className=\"_139cec8e_test test\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can use a component that's referencing a public class", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"mod\" />\n        <mod.Test />\n      ",
                        "/module.pc": "\n        <import src=\"./module2.pc\" as=\"tw\" />\n        <div export component as=\"Test\" className=\"$tw.test\">\n        </div>\n      ",
                        "/module2.pc": "\n        <style>\n          @export {\n            .test {\n              color: blue;\n            }\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._11a847ab_test { color:blue; }</style><div className=\"_11a847ab_test test\" data-pc-139cec8e></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Prefixes classnames if they come after shadow pierce", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"./module.pc\" as=\"tw\" />\n        <div export component as=\"Test\" className=\"$tw.test checkbox\">\n          \n        </div>\n        <Test />\n      ",
                        "/module.pc": "\n        <style>\n          @export {\n            .test {\n              color: blue;\n            }\n          }\n        </style>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._139cec8e_test { color:blue; }</style><div className=\"_139cec8e_test test _80f4925f_checkbox checkbox\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can change the tag name of an element", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div {tagName?} component as=\"Test\">\n          \n        </div>\n        <Test />\n        <Test tagName=\"span\" />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style></style><div data-pc-80f4925f></div><span data-pc-80f4925f></span>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Cannot change tag name if not exposed", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\">\n          \n        </div>\n        <Test />\n        <Test tagName=\"span\" />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style></style><div data-pc-80f4925f></div><div data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Does not render undefined if child isn't present", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\">\n          {children}\n          {slot}\n        </div>\n        <Test />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style></style><div data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Doesn't crash when dependency is updated", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, crashErr, engine, e_13, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <import src=\"a.pc\" />\n        <import src=\"b.pc\" as=\"b\" />\n        \n        <b />\n      ",
                        "/a.pc": "a",
                        "/b.pc": "\n        <div export component as=\"default\">b</div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph, function (e) {
                            crashErr = e;
                        })];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    _a.sent();
                    return [4 /*yield*/, engine.run("/b.pc")];
                case 3:
                    _a.sent();
                    _a.label = 4;
                case 4:
                    _a.trys.push([4, 6, , 7]);
                    return [4 /*yield*/, engine.updateVirtualFileContent("/b.pc", "<div export component as=\"default\">b</div><div value\">")];
                case 5:
                    _a.sent();
                    return [3 /*break*/, 7];
                case 6:
                    e_13 = _a.sent();
                    return [3 /*break*/, 7];
                case 7: return [4 /*yield*/, engine.updateVirtualFileContent("/a.pc", "aa")];
                case 8:
                    _a.sent();
                    return [4 /*yield*/, engine.updateVirtualFileContent("/b.pc", "<div export component as=\"default\">bb</div>")];
                case 9:
                    _a.sent();
                    chai_1.expect(crashErr).to.eql(undefined);
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 10:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style></style><div data-pc-8ae793af>bb</div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can define nested style blocks", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div>\n          <style>\n            :self {\n              color: blue;\n            }\n            :self(.test) {\n              color: red;\n            }\n            \n            #test2 {\n              color: blue;\n            }\n          </style>\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-406d2856][data-pc-406d2856] { color:blue; } [data-pc-406d2856][class].test { color:red; } [data-pc-406d2856] #test2[data-pc-80f4925f] { color:blue; }</style><div data-pc-406d2856 data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can define nested slot style blocks", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\"> \n          {test}\n        </div>\n        <Test test={<span>\n          <style> \n            :self {\n              color: red;\n            }\n          </style>\n          abba\n        </span>} />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-6f887789][data-pc-6f887789] { color:red; }</style><div data-pc-80f4925f><span data-pc-6f887789 data-pc-80f4925f> abba </span></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can define scoped styles without :self selector", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div>\n          <style>\n            color: red;\n            background: url(\"path.png\");\n            :self(.variant) {\n              color: blue;\n            }\n          </style>\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-406d2856][class].variant { color:blue; } [data-pc-406d2856][data-pc-406d2856] { color:red; background:url(/path.png); }</style><div data-pc-406d2856 data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can include mixins within scoped styles", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <style>\n          @mixin a {\n            color: red;\n          }\n        </style>\n        <div>\n          <style>\n            @include a;\n          </style>\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-376a18c0][data-pc-376a18c0] { color:red; }</style><div data-pc-376a18c0 data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can include mixins within scoped styles with a decl", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <style>\n          @mixin a {\n            color: red;\n          }\n        </style>\n        <div>\n          <style>\n            background: blue;\n            @include a;\n          </style>\n        </div>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-376a18c0][data-pc-376a18c0] { background:blue; color:red; }</style><div data-pc-376a18c0 data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can define style tag for void elements", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <input>\n          <style>\n            background: blue;\n          </style>\n        </input>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-406d2856][data-pc-406d2856] { background:blue; }</style><input data-pc-406d2856 data-pc-80f4925f></input>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can scope media queries", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n\n        <style>\n          @mixin desktop {\n            @media screen and (max-width: 1280px) {\n              @content;\n            }\n          }\n        </style>\n        <input>\n          <style>\n            @media screen and (max-width: 400px) {\n              color: red;\n            }\n\n            @include desktop {\n              color: black;\n            }\n\n            label {\n              @include desktop {\n                color: blue;\n              }\n            }\n          </style>\n        </input>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>@media screen and (max-width: 400px) { [data-pc-376a18c0] { color:red; } } @media screen and (max-width: 1280px) { [data-pc-376a18c0] { color:black; } } @media screen and (max-width: 1280px) { [data-pc-376a18c0] label[data-pc-80f4925f] { color:blue; } }</style><input data-pc-376a18c0 data-pc-80f4925f></input>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can apply styles to a component", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" {className?}>\n\n        </div>\n        <Test>\n          <style>\n            background: blue;\n          </style>\n        </Test>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._376a18c0 { background:blue; }</style><div className=\"_80f4925f__376a18c0 _376a18c0\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can apply styles to a component that has a class already defined", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" {className?}>\n\n        </div>\n        <Test className=\"test\">\n          <style>\n            background: blue;\n          </style>\n        </Test>\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._376a18c0 { background:blue; }</style><div className=\"_80f4925f_test test _80f4925f__376a18c0 _376a18c0\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Can apply styles to instance of instance of component", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        <div component as=\"Test\" {className?}>\n\n        </div>\n        <Test component as=\"Test2\" className=\"test {className?}\">\n          <style>\n            background: blue;\n          </style>\n        </Test>\n        <Test2 className=\"test3\">\n          <style>\n            background: orange;\n          </style>\n        </Test2>\n\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[class]._376a18c0 { background:blue; } [class]._ae63497a { background:orange; }</style><div className=\"_80f4925f_test test _80f4925f_test3 test3 _80f4925f__ae63497a _ae63497a _80f4925f__376a18c0 _376a18c0\" data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
    it("Properly emits correct events", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, events;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n        a\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    events = [];
                    engine.onEvent(events.push.bind(events));
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    _a.sent();
                    return [4 /*yield*/, engine.updateVirtualFileContent("/entry.pc", "b")];
                case 3:
                    _a.sent();
                    return [4 /*yield*/, engine.updateVirtualFileContent("/entry.pc", "c")];
                case 4:
                    _a.sent();
                    chai_1.expect(events.map(function (event) { return event.kind; })).to.eql([
                        paperclip_utils_1.EngineEventKind.Loaded,
                        paperclip_utils_1.EngineEventKind.Evaluated,
                        paperclip_utils_1.EngineEventKind.Diffed,
                        paperclip_utils_1.EngineEventKind.Diffed
                    ]);
                    return [2 /*return*/];
            }
        });
    }); });
    // fixes https://github.com/crcn/paperclip/issues/508
    it("properly applies scoped style for nested & combo", function () { return __awaiter(void 0, void 0, void 0, function () {
        var graph, engine, result;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    graph = {
                        "/entry.pc": "\n      <div component as=\"Test\">\n        <style>\n          color: red;\n\n          a {\n            background: blue;\n\n            &.b, &.c {\n              opacity: 1;\n            }\n\n            e {\n              color: orange;\n            }\n          }\n        </style>\n      </div>\n      \n      <Test />\n      "
                    };
                    return [4 /*yield*/, utils_1.createMockEngine(graph)];
                case 1:
                    engine = _a.sent();
                    return [4 /*yield*/, engine.run("/entry.pc")];
                case 2:
                    result = _a.sent();
                    chai_1.expect(utils_1.stringifyLoadResult(result)).to.eql("<style>[data-pc-406d2856] a[data-pc-80f4925f] { background:blue; } [data-pc-406d2856] a[data-pc-80f4925f][class].b { opacity:1; } [data-pc-406d2856] a[data-pc-80f4925f][class].c { opacity:1; } [data-pc-406d2856] a[data-pc-80f4925f] e[data-pc-80f4925f] { color:orange; } [data-pc-406d2856][data-pc-406d2856] { color:red; }</style><div data-pc-406d2856 data-pc-80f4925f></div>");
                    return [2 /*return*/];
            }
        });
    }); });
});
