clarity-decode 0.6.23

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "clarity-decode",
+  "version": "0.6.23",
+  "description": "An analytics library that uses web page interactions to generate aggregated insights",
+  "author": "Microsoft Corp.",
+  "license": "MIT",
+  "main": "build/clarity.decode.js",
+  "module": "build/clarity.decode.module.js",
+  "unpkg": "build/clarity.decode.min.js",
+  "types": "types/index.d.ts",
+  "keywords": [
+    "clarity",
+    "Microsoft",
+    "interactions",
+    "cursor",
+    "pointer",
+    "instrumentation",
+    "analytics"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/clarity.git",
+    "directory": "packages/clarity-decode"
+  },
+  "bugs": {
+    "url": "https://github.com/Microsoft/clarity/issues"
+  },
+  "dependencies": {
+    "clarity-js": "^0.6.23"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "del-cli": "^4.0.1",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.0.1",
+    "rollup": "^2.53.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "ts-node": "^10.1.0",
+    "tslint": "^6.1.3",
+    "typescript": "^4.3.5"
+  },
+  "scripts": {
+    "build": "yarn build:clean && yarn build:main",
+    "build:main": "rollup -c rollup.config.ts",
+    "build:clean": "del-cli build/*",
+    "tslint": "tslint --project ./",
+    "tslint:fix": "tslint --fix --project ./ --force"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "tslint --format codeFrame"
+    ]
+  }
+}

package/rollup.config.ts

@@ -0,0 +1,30 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+import { terser } from "rollup-plugin-terser";
+import pkg from "./package.json";
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      { file: pkg.main, format: "cjs", exports: "named" },
+      { file: pkg.module, format: "es", exports: "named" }
+    ],
+    plugins: [
+      resolve(),
+      typescript({ rollupCommonJSResolveHack: true, clean: true }),
+      commonjs({ include: ["node_modules/**"] })
+    ]
+  },
+  {
+    input: "src/global.ts",
+    output: [ { file: pkg.unpkg, format: "iife", exports: "named" } ],
+    plugins: [
+      resolve(),
+      typescript({ rollupCommonJSResolveHack: true, clean: true }),
+      terser({output: {comments: false}}),
+      commonjs({ include: ["node_modules/**"] })
+    ]
+  }
+];

package/src/clarity.ts

@@ -0,0 +1,195 @@
+import { Data, version } from "clarity-js";
+import { BaselineEvent, CustomEvent, DecodedPayload, DecodedVersion, DimensionEvent } from "../types/data";
+import { LimitEvent, MetricEvent, PingEvent, SummaryEvent, UpgradeEvent, UploadEvent, VariableEvent } from "../types/data";
+import { ImageErrorEvent, LogEvent, ScriptErrorEvent } from "../types/diagnostic";
+import { ClickEvent, InputEvent, PointerEvent, ResizeEvent, ScrollEvent, TimelineEvent } from "../types/interaction";
+import { SelectionEvent, UnloadEvent, VisibilityEvent } from "../types/interaction";
+import { BoxEvent, DocumentEvent, DomEvent, RegionEvent } from "../types/layout";
+import { ConnectionEvent, NavigationEvent } from "../types/performance";
+
+import * as data from "./data";
+import * as diagnostic from "./diagnostic";
+import * as interaction from "./interaction";
+import * as layout from "./layout";
+import * as performance from "./performance";
+
+export function decode(input: string): DecodedPayload {
+    let json: Data.Payload = JSON.parse(input);
+    let envelope = data.envelope(json.e);
+    let timestamp = Date.now();
+    let payload: DecodedPayload = { timestamp, envelope };
+
+    // Sort encoded events by time to simplify summary computation
+    // It's possible for individual events to be out of order, dependent on how they are buffered on the client
+    // E.g. scroll events are queued internally before they are sent over the wire.
+    // By comparison, events like resize & click are sent out immediately.
+    let encoded: Data.Token[][] = json.p ? json.a.concat(json.p) : json.a;
+    encoded = encoded.sort((a: Data.Token[], b: Data.Token[]): number => (a[0] as number) - (b[0] as number));
+
+    // Check if the incoming version is compatible with the current running code
+    // We do an exact match for the major version and minor version.
+    // For patch, we are backward and forward compatible with up to version change.
+    let jsonVersion = parseVersion(payload.envelope.version);
+    let codeVersion = parseVersion(version);
+
+    if (jsonVersion.major !== codeVersion.major ||
+        Math.abs(jsonVersion.minor - codeVersion.minor) > 1) {
+        throw new Error(`Invalid version. Actual: ${payload.envelope.version} | Expected: ${version} (+/- 1) | ${input.substr(0, 250)}`);
+    }
+
+    /* Reset components before decoding to keep them stateless */
+    layout.reset();
+
+    for (let entry of encoded) {
+        switch (entry[1]) {
+            case Data.Event.Baseline:
+                if (payload.baseline === undefined) { payload.baseline = []; }
+                payload.baseline.push(data.decode(entry) as BaselineEvent);
+                break;
+            case Data.Event.Ping:
+                if (payload.ping === undefined) { payload.ping = []; }
+                payload.ping.push(data.decode(entry) as PingEvent);
+                break;
+            case Data.Event.Limit:
+                if (payload.limit === undefined) { payload.limit = []; }
+                payload.limit.push(data.decode(entry) as LimitEvent);
+                break;
+            case Data.Event.Upgrade:
+                if (payload.upgrade === undefined) { payload.upgrade = []; }
+                payload.upgrade.push(data.decode(entry) as UpgradeEvent);
+                break;
+            case Data.Event.Metric:
+                if (payload.metric === undefined) { payload.metric = []; }
+                let metric = data.decode(entry) as MetricEvent;
+                // It's not possible to accurately include the byte count of the payload within the same payload
+                // The value we get from clarity-js lags behind by a payload. To work around that,
+                // we increment the bytes from the incoming payload at decode time.
+                metric.data[Data.Metric.TotalBytes] = input.length;
+                payload.metric.push(metric);
+                break;
+            case Data.Event.Dimension:
+                if (payload.dimension === undefined) { payload.dimension = []; }
+                payload.dimension.push(data.decode(entry) as DimensionEvent);
+                break;
+            case Data.Event.Summary:
+                if (payload.summary === undefined) { payload.summary = []; }
+                payload.summary.push(data.decode(entry) as SummaryEvent);
+                break;
+            case Data.Event.Custom:
+                if (payload.custom === undefined) { payload.custom = []; }
+                payload.custom.push(data.decode(entry) as CustomEvent);
+                break;
+            case Data.Event.Variable:
+                if (payload.variable === undefined) { payload.variable = []; }
+                payload.variable.push(data.decode(entry) as VariableEvent);
+                break;
+            case Data.Event.Upload:
+                if (payload.upload === undefined) { payload.upload = []; }
+                payload.upload.push(data.decode(entry) as UploadEvent);
+                break;
+            case Data.Event.MouseDown:
+            case Data.Event.MouseUp:
+            case Data.Event.MouseMove:
+            case Data.Event.MouseWheel:
+            case Data.Event.DoubleClick:
+            case Data.Event.TouchStart:
+            case Data.Event.TouchCancel:
+            case Data.Event.TouchEnd:
+            case Data.Event.TouchMove:
+                if (payload.pointer === undefined) { payload.pointer = []; }
+                payload.pointer.push(interaction.decode(entry) as PointerEvent);
+                break;
+            case Data.Event.Click:
+                if (payload.click === undefined) { payload.click = []; }
+                let clickEntry = interaction.decode(entry) as ClickEvent;
+                payload.click.push(clickEntry);
+                break;
+            case Data.Event.Scroll:
+                if (payload.scroll === undefined) { payload.scroll = []; }
+                payload.scroll.push(interaction.decode(entry) as ScrollEvent);
+                break;
+            case Data.Event.Resize:
+                if (payload.resize === undefined) { payload.resize = []; }
+                payload.resize.push(interaction.decode(entry) as ResizeEvent);
+                break;
+            case Data.Event.Selection:
+                if (payload.selection === undefined) { payload.selection = []; }
+                payload.selection.push(interaction.decode(entry) as SelectionEvent);
+                break;
+            case Data.Event.Timeline:
+                if (payload.timeline === undefined) { payload.timeline = []; }
+                payload.timeline.push(interaction.decode(entry) as TimelineEvent);
+                break;
+            case Data.Event.Input:
+                if (payload.input === undefined) { payload.input = []; }
+                payload.input.push(interaction.decode(entry) as InputEvent);
+                break;
+            case Data.Event.Unload:
+                if (payload.unload === undefined) { payload.unload = []; }
+                payload.unload.push(interaction.decode(entry) as UnloadEvent);
+                break;
+            case Data.Event.Visibility:
+                if (payload.visibility === undefined) { payload.visibility = []; }
+                payload.visibility.push(interaction.decode(entry) as VisibilityEvent);
+                break;
+            case Data.Event.Box:
+                if (payload.box === undefined) { payload.box = []; }
+                payload.box.push(layout.decode(entry) as BoxEvent);
+                break;
+            case Data.Event.Region:
+                if (payload.region === undefined) { payload.region = []; }
+                payload.region.push(layout.decode(entry) as RegionEvent);
+                break;
+            case Data.Event.Discover:
+            case Data.Event.Mutation:
+                if (payload.dom === undefined) { payload.dom = []; }
+                payload.dom.push(layout.decode(entry) as DomEvent);
+                break;
+            case Data.Event.Document:
+                if (payload.doc === undefined) { payload.doc = []; }
+                payload.doc.push(layout.decode(entry) as DocumentEvent);
+                break;
+            case Data.Event.ScriptError:
+                if (payload.script === undefined) { payload.script = []; }
+                payload.script.push(diagnostic.decode(entry) as ScriptErrorEvent);
+                break;
+            case Data.Event.ImageError:
+                if (payload.image === undefined) { payload.image = []; }
+                payload.image.push(diagnostic.decode(entry) as ImageErrorEvent);
+                break;
+            case Data.Event.Log:
+                if (payload.log === undefined) { payload.log = []; }
+                payload.log.push(diagnostic.decode(entry) as LogEvent);
+                break;
+            case Data.Event.Connection:
+                if (payload.connection === undefined) { payload.connection = []; }
+                payload.connection.push(performance.decode(entry) as ConnectionEvent);
+                break;
+            case Data.Event.Navigation:
+                if (payload.navigation === undefined) { payload.navigation = []; }
+                payload.navigation.push(performance.decode(entry) as NavigationEvent);
+                break;
+            default:
+                console.error(`No handler for Event: ${JSON.stringify(entry)}`);
+                break;
+        }
+    }
+
+    return payload;
+}
+
+
+function parseVersion(ver: string): DecodedVersion {
+    let output: DecodedVersion = { major: 0, minor: 0, patch: 0, beta: 0 };
+    let parts = ver.split(".");
+    if (parts.length === 3) {
+        let subparts = parts[2].split("-b");
+        output.major = parseInt(parts[0], 10);
+        output.minor = parseInt(parts[1], 10);
+        if (subparts.length === 2) {
+            output.patch = parseInt(subparts[0], 10);
+            output.beta = parseInt(subparts[1], 10);
+        } else { output.patch = parseInt(parts[2], 10); }
+    }
+    return output;
+}

package/src/data.ts

@@ -0,0 +1,87 @@
+import { Data } from "clarity-js";
+import { Constant, DataEvent } from "../types/data";
+
+export function decode(tokens: Data.Token[]): DataEvent {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Data.Event;
+    switch (event) {
+        case Data.Event.Ping:
+            let ping: Data.PingData = { gap: tokens[2] as number };
+            return { time, event, data: ping };
+        case Data.Event.Limit:
+            let limit: Data.LimitData = { check: tokens[2] as number };
+            return { time, event, data: limit };
+        case Data.Event.Custom:
+            let custom: Data.CustomData = { key: tokens[2] as string, value: tokens[3] as string };
+            return { time, event, data: custom };
+        case Data.Event.Upgrade:
+            let upgrade: Data.UpgradeData = { key: tokens[2] as string };
+            return { time, event, data: upgrade };
+        case Data.Event.Upload:
+            let upload: Data.UploadData = { sequence: tokens[2] as number, attempts: tokens[3] as number, status: tokens[4] as number };
+            return { time, event, data: upload };
+        case Data.Event.Metric:
+            let m = 2; // Start from 3rd index since first two are used for time & event
+            let metrics: Data.MetricData = {};
+            while (m < tokens.length) {
+                metrics[tokens[m++] as number] = tokens[m++] as number;
+            }
+            return { time, event, data: metrics };
+        case Data.Event.Dimension:
+            let d = 2; // Start from 3rd index since first two are used for time & event
+            let dimensions: Data.DimensionData = {};
+            while (d < tokens.length) {
+                dimensions[tokens[d++] as number] = tokens[d++] as string[];
+            }
+            return { time, event, data: dimensions };
+        case Data.Event.Summary:
+            let s = 2; // Start from 3rd index since first two are used for time & event
+            let summary: Data.SummaryData = {};
+            while (s < tokens.length) {
+                let key = tokens[s++] as number;
+                let values = tokens[s++] as number[];
+                summary[key] = [];
+                for (let i = 0; i < values.length - 1; i += 2) {
+                    summary[key].push([values[i], values[i + 1]]);
+                }
+            }
+            return { time, event, data: summary };
+        case Data.Event.Baseline:
+            let baselineData: Data.BaselineData = {
+                visible: tokens[2] as number,
+                docWidth: tokens[3] as number,
+                docHeight: tokens[4] as number,
+                screenWidth: tokens[5] as number,
+                screenHeight: tokens[6] as number,
+                scrollX: tokens[7] as number,
+                scrollY: tokens[8] as number,
+                pointerX: tokens[9] as number,
+                pointerY: tokens[10] as number,
+                activityTime: tokens[11] as number
+            }
+            return { time, event, data: baselineData };
+        case Data.Event.Variable:
+            let v = 2; // Start from 3rd index since first two are used for time & event
+            let variables: Data.VariableData = {};
+            while (v < tokens.length) {
+                variables[tokens[v++] as string] = typeof tokens[v + 1] == Constant.String ? [tokens[v++] as string] : tokens[v++] as string[];
+            }
+            return { time, event, data: variables };
+    }
+    return null;
+}
+
+export function envelope(tokens: Data.Token[]): Data.Envelope {
+    return {
+        version: tokens[0] as string,
+        sequence: tokens[1] as number,
+        start: tokens[2] as number,
+        duration: tokens[3] as number,
+        projectId: tokens[4] as string,
+        userId: tokens[5] as string,
+        sessionId: tokens[6] as string,
+        pageNum: tokens[7] as number,
+        upload: tokens[8] as Data.Upload,
+        end: tokens[9] as Data.BooleanFlag
+    };
+}

package/src/diagnostic.ts

@@ -0,0 +1,34 @@
+import { Data, Diagnostic } from "clarity-js";
+import { DiagnosticEvent } from "../types/diagnostic";
+
+export function decode(tokens: Data.Token[]): DiagnosticEvent {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Data.Event;
+    switch (event) {
+        case Data.Event.ImageError:
+            let imageError: Diagnostic.ImageErrorData = {
+                source: tokens[2] as string,
+                target: tokens[3] as number,
+            };
+            return { time, event, data: imageError };
+        case Data.Event.ScriptError:
+            let scriptError: Diagnostic.ScriptErrorData = {
+                message: tokens[2] as string,
+                line: tokens[3] as number,
+                column: tokens[4] as number,
+                stack: tokens[5] as string,
+                source: tokens[6] as string
+            };
+            return { time, event, data: scriptError };
+        case Data.Event.Log:
+            let log: Diagnostic.LogData = {
+                code: tokens[2] as number,
+                name: tokens[3] as string,
+                message: tokens[4] as string,
+                stack: tokens[5] as string,
+                severity: tokens[6] as number
+            };
+            return { time, event, data: log };
+    }
+    return null;
+}

package/src/global.ts

@@ -0,0 +1,9 @@
+import * as decode from "@src/clarity";
+
+// Expose clarity variable globally to allow access to public interface in a browser
+if (typeof window !== "undefined") {
+    if ((window as any).clarity === undefined || (window as any).clarity === null) {
+        (window as any).clarity = {};
+    }
+    (window as any).clarity.decode = decode;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { decode } from "./clarity";

package/src/interaction.ts

@@ -0,0 +1,80 @@
+import { Data, Interaction } from "clarity-js";
+import { InteractionEvent } from "../types/interaction";
+
+export function decode(tokens: Data.Token[]): InteractionEvent {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Data.Event;
+    switch (event) {
+        case Data.Event.MouseDown:
+        case Data.Event.MouseUp:
+        case Data.Event.MouseMove:
+        case Data.Event.MouseWheel:
+        case Data.Event.DoubleClick:
+        case Data.Event.TouchStart:
+        case Data.Event.TouchCancel:
+        case Data.Event.TouchEnd:
+        case Data.Event.TouchMove:
+            let pointerData: Interaction.PointerData = {
+                target: tokens[2] as number,
+                x: tokens[3] as number,
+                y: tokens[4] as number
+            };
+            return { time, event, data: pointerData };
+        case Data.Event.Click:
+            let clickData: Interaction.ClickData = {
+                target: tokens[2] as number,
+                x: tokens[3] as number,
+                y: tokens[4] as number,
+                eX: tokens[5] as number,
+                eY: tokens[6] as number,
+                button: tokens[7] as number,
+                reaction: tokens[8] as number,
+                context: tokens[9] as number,
+                text: tokens[10] as string,
+                link: tokens[11] as string,
+                hash: tokens[12] as string
+            };
+            return { time, event, data: clickData };
+        case Data.Event.Resize:
+            let resizeData: Interaction.ResizeData = { width: tokens[2] as number, height: tokens[3] as number };
+            return { time, event, data: resizeData };
+        case Data.Event.Input:
+            let inputData: Interaction.InputData = {
+                target: tokens[2] as number,
+                value: tokens[3] as string
+            };
+            return { time, event, data: inputData };
+        case Data.Event.Selection:
+            let selectionData: Interaction.SelectionData = {
+                start: tokens[2] as number,
+                startOffset: tokens[3] as number,
+                end: tokens[4] as number,
+                endOffset: tokens[5] as number
+            };
+            return { time, event, data: selectionData };
+        case Data.Event.Scroll:
+            let scrollData: Interaction.ScrollData = {
+                target: tokens[2] as number,
+                x: tokens[3] as number,
+                y: tokens[4] as number
+            };
+            return { time, event, data: scrollData };
+        case Data.Event.Timeline:
+            let timelineData: Interaction.TimelineData = {
+                type: tokens[2] as number,
+                hash: tokens[3] as string,
+                x: tokens[4] as number,
+                y: tokens[5] as number,
+                reaction: tokens[6] as number,
+                context: tokens[7] as number
+            };
+            return { time, event, data: timelineData };
+        case Data.Event.Visibility:
+            let visibleData: Interaction.VisibilityData = { visible: tokens[2] as string };
+            return { time, event, data: visibleData };
+        case Data.Event.Unload:
+            let unloadData: Interaction.UnloadData = { name: tokens[2] as string };
+            return { time, event, data: unloadData };
+    }
+    return null;
+}

package/src/layout.ts

@@ -0,0 +1,163 @@
+import { helper, Data, Layout } from "clarity-js";
+import { DomData, LayoutEvent } from "../types/layout";
+
+const AverageWordLength = 6;
+const Space = " ";
+let hashes: { [key: number]: string } = {};
+
+export function reset(): void {
+    hashes = {};
+}
+
+export function decode(tokens: Data.Token[]): LayoutEvent {
+    let time = tokens[0] as number;
+    let event = tokens[1] as Data.Event;
+
+    switch (event) {
+        case Data.Event.Document:
+            let documentData: Layout.DocumentData = { width: tokens[2] as number, height: tokens[3] as number };
+            return { time, event, data: documentData };
+        case Data.Event.Region:
+            let regionData: Layout.RegionData[] = [];
+            // From 0.6.15 we send each reach update in an individual event. This allows us to include time with it.
+            // To keep it backward compatible (<= 0.6.14), we look for multiple regions in the same event. This works both with newer and older payloads.
+            // In future, we can update the logic to look deterministically for only 3 fields and remove the for loop.
+            for (let i = 2; i < tokens.length; i += 3) {
+                let region: Layout.RegionData = {
+                    id: tokens[i] as number,
+                    state: tokens[i + 1] as number,
+                    name: tokens[i + 2] as string
+                };
+                regionData.push(region);
+            }
+            return { time, event, data: regionData };
+        case Data.Event.Box:
+            let boxData: Layout.BoxData[] = [];
+            for (let i = 2; i < tokens.length; i += 3) {
+                let box: Layout.BoxData = {
+                    id: tokens[i] as number,
+                    width: tokens[i + 1] as number / Data.Setting.BoxPrecision,
+                    height: tokens[i + 2] as number / Data.Setting.BoxPrecision
+                };
+                boxData.push(box);
+            }
+            return { time, event, data: boxData };
+        case Data.Event.Discover:
+        case Data.Event.Mutation:
+            let lastType = null;
+            let node = [];
+            let tagIndex = 0;
+            let domData: DomData[] = [];
+            for (let i = 2; i < tokens.length; i++) {
+                let token = tokens[i];
+                let type = typeof(token);
+                switch (type) {
+                    case "number":
+                        if (type !== lastType && lastType !== null) {
+                            domData.push(process(node, tagIndex));
+                            node = [];
+                            tagIndex = 0;
+                        }
+                        node.push(token);
+                        tagIndex++;
+                        break;
+                    case "string":
+                        node.push(token);
+                        break;
+                    case "object":
+                        let subtoken = token[0];
+                        let subtype = typeof(subtoken);
+                        switch (subtype) {
+                            case "number":
+                                for (let t of (token as number[])) {
+                                    node.push(tokens.length > t ? tokens[t] : null);
+                                }
+                                break;
+                        }
+                }
+                lastType = type;
+            }
+            // Process last node
+            domData.push(process(node, tagIndex));
+
+            return { time, event, data: domData };
+    }
+    return null;
+}
+
+function process(node: any[] | number[], tagIndex: number): DomData {
+    let [tag, position]: string[]  = node[tagIndex] ? node[tagIndex].split("~") : [node[tagIndex]];
+    let output: DomData = {
+        id: Math.abs(node[0]),
+        parent: tagIndex > 1 ? node[1] : null,
+        previous: tagIndex > 2 ? node[2] : null,
+        tag,
+        position: position ? parseInt(position, 10) : null,
+        selector: null,
+        hash: null
+    };
+    let masked = node[0] < 0;
+    let hasAttribute = false;
+    let attributes: Layout.Attributes = {};
+    let value = null;
+    let prefix = output.parent in hashes ? `${hashes[output.parent]}>` : (output.parent ? Layout.Constant.Empty : null);
+
+    for (let i = tagIndex + 1; i < node.length; i++) {
+        // Explicitly convert the token into a string value
+        let token = node[i].toString();
+        let keyIndex = token.indexOf("=");
+        let firstChar = token[0];
+        let lastChar = token[token.length - 1];
+        if (i === (node.length - 1) && output.tag === "STYLE") {
+            value = token;
+        } else if (output.tag !== Layout.Constant.TextTag && lastChar === ">" && keyIndex === -1) {
+            prefix = token;
+        } else if (output.tag !== Layout.Constant.TextTag && firstChar === Layout.Constant.Box && keyIndex === -1) {
+            let parts = token.substr(1).split(Layout.Constant.Period);
+            if (parts.length === 2) {
+                output.width = num(parts[0]) / Data.Setting.BoxPrecision;
+                output.height = num(parts[1]) / Data.Setting.BoxPrecision;
+            }
+        } else if (output.tag !== Layout.Constant.TextTag && keyIndex > 0) {
+            hasAttribute = true;
+            let k = token.substr(0, keyIndex);
+            let v = token.substr(keyIndex + 1);
+            attributes[k] = v;
+        } else if (output.tag === Layout.Constant.TextTag) {
+            value = masked ? unmask(token) : token;
+        }
+    }
+
+    let selector = helper.selector(output.tag, prefix, attributes, output.position);
+    if (selector.length > 0) {
+        output.selector = selector;
+        output.hash = helper.hash(selector);
+        hashes[output.id] = selector;
+    }
+
+    if (hasAttribute) { output.attributes = attributes; }
+    if (value) { output.value = value; }
+
+    return output;
+}
+
+function num(input: string): number {
+    return input ? parseInt(input, 36) : null;
+}
+
+function unmask(value: string): string {
+    let trimmed = value.trim();
+    if (trimmed.length > 0 && trimmed.indexOf(Space) === -1) {
+        let length = num(trimmed);
+        if (length > 0) {
+            let quotient = Math.floor(length / AverageWordLength);
+            let remainder = length % AverageWordLength;
+            let output = Array(remainder + 1).join(Data.Constant.Mask);
+            for (let i = 0; i < quotient; i++) {
+                output += (i === 0 && remainder === 0 ? Data.Constant.Mask : Space) + Array(AverageWordLength).join(Data.Constant.Mask);
+            }
+            return output;
+        }
+    }
+    return value;
+}