Browser Data Shapes

Dataset Attributes

Browser data-* attributes can be represented as a narrow dataset object.

dataset A dataset object keeps attribute values as strings, then code converts the specific fields it needs.

Dataset Attributes

actionName
dataset.ts
Replay: real traced execution (multi-file project)
type ButtonDataset = {
    action: string;
    count: string;
};

function describeButton(dataset: ButtonDataset): string {
    const count: number = Number(dataset.count);
    return `${dataset.action}:${count * 2}`;
}

const actionName: string = "save";
const dataset: ButtonDataset = {
    action: actionName,
    count: "3"
};

console.log(describeButton(dataset));

type ButtonDataset = {
    action: string;
    count: string;
};

function describeButton(dataset: ButtonDataset): string {
    const count: number = Number(dataset.count);
    return `${dataset.action}:${count * 2}`;
}

const actionName: string = "delete";
const dataset: ButtonDataset = {
    action: actionName,
    count: "3"
};

console.log(describeButton(dataset));

  1. actionName ← save, dataset ← [object Object]

    8    return `${dataset.action}:${count * 2}`;9}1011const actionName→ save: string = "save";  //@actionName="delete"12const dataset→ [object Object]: ButtonDataset = {13    action: actionNamesave,14    count: "3"15};1617console.log(describeButton(dataset[object Object]));

  2. count ← 3

    3    count: string;4};56function describeButton(dataset[object Object]: ButtonDataset): string {7    const count→ 3: number = Number(dataset.count3);8    return `${dataset.actionsave}:${count * 2}`;9}

  3. console.log(describeButton(dataset));

    14    count: "3"15};1617console.log(describeButton(dataset[object Object]));
    outputsave:6

  1. actionName ← delete, dataset ← [object Object]

    8    return `${dataset.action}:${count * 2}`;9}1011const actionName→ delete: string = "delete";12const dataset→ [object Object]: ButtonDataset = {13    action: actionNamedelete,14    count: "3"15};1617console.log(describeButton(dataset[object Object]));

  2. count ← 3

    3    count: string;4};56function describeButton(dataset[object Object]: ButtonDataset): string {7    const count→ 3: number = Number(dataset.count3);8    return `${dataset.actiondelete}:${count * 2}`;9}

  3. console.log(describeButton(dataset));

    14    count: "3"15};1617console.log(describeButton(dataset[object Object]));
    outputdelete:6