@microsoft/fast-html 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/esm/components/observer-map.js

@@ -0,0 +1,49 @@
+import { Observable } from "@microsoft/fast-element/observable.js";
+import { assignObservables } from "./utilities.js";
+/**
+ * ObserverMap provides functionality for caching binding paths, extracting root properties,
+ * and defining observable properties on class prototypes
+ */
+export class ObserverMap {
+    constructor(classPrototype, schema) {
+        /**
+         * Creates a property change handler function for observable properties
+         * This handler is called when an observable property transitions from undefined to a defined value
+         * @param propertyName - The name of the property for which to create the change handler
+         * @returns A function that handles property changes and sets up proxies for object values
+         */
+        this.defineChanged = (propertyName) => {
+            const getAndAssignObservablesAlias = this.getAndAssignObservables;
+            const schema = this.schema;
+            function instanceResolverChanged(prev, next) {
+                if (prev === undefined && next !== undefined) {
+                    const proxy = getAndAssignObservablesAlias(this, propertyName, next, schema);
+                    this[propertyName] = proxy;
+                }
+            }
+            return instanceResolverChanged;
+        };
+        this.classPrototype = classPrototype;
+        this.schema = schema;
+    }
+    defineProperties() {
+        const propertyNames = this.schema.getRootProperties();
+        for (const propertyName of propertyNames) {
+            Observable.defineProperty(this.classPrototype, propertyName);
+            this.classPrototype[`${propertyName}Changed`] =
+                this.defineChanged(propertyName);
+        }
+    }
+    /**
+     * Creates a proxy for an object that intercepts property mutations and triggers Observable notifications
+     * @param target - The target instance that owns the root property
+     * @param rootProperty - The name of the root property for notification purposes
+     * @param object - The object to wrap with a proxy
+     * @returns A proxy that triggers notifications on property mutations
+     */
+    getAndAssignObservables(target, rootProperty, object, schema) {
+        let proxiedObject = object;
+        proxiedObject = assignObservables(schema.getSchema(rootProperty), schema.getSchema(rootProperty), proxiedObject, target, rootProperty);
+        return proxiedObject;
+    }
+}

package/dist/esm/components/observer-map.spec.js

@@ -0,0 +1,19 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+import { ObserverMap } from "./observer-map.js";
+import { Schema } from "./schema.js";
+test.describe("ObserverMap", () => __awaiter(void 0, void 0, void 0, function* () {
+    let observerMap;
+    let schema = new Schema("test-class");
+    class TestClass {
+    }
+    test.beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
+        // Use TestClass.prototype so instances will have the observable properties
+        observerMap = new ObserverMap(TestClass.prototype, schema);
+    }));
+    test("should create new instances", () => __awaiter(void 0, void 0, void 0, function* () {
+        const instance1 = new ObserverMap(TestClass.prototype, schema);
+        const instance2 = new ObserverMap(TestClass.prototype, schema);
+        expect(instance1).not.toBe(instance2);
+    }));
+}));

package/dist/esm/components/schema.js

@@ -0,0 +1,215 @@
+// The context, in most cases the array property e.g. users
+export const fastContextMetaData = "$fast_context";
+// The list of contexts preceeding this context, the first of which should be the root property
+export const fastContextsMetaData = "$fast_parent_contexts";
+export const defsPropertyName = "$defs";
+export const refPropertyName = "$ref";
+/**
+ * A constructed JSON schema from a template
+ */
+export class Schema {
+    constructor(name) {
+        /**
+         * A JSON schema describing each root schema
+         */
+        this.jsonSchemaMap = new Map();
+        this.customElementName = name;
+    }
+    /**
+     * Add a path to a schema
+     * @param config RegisterPathConfig
+     */
+    addPath(config) {
+        var _a, _b, _c;
+        const splitPath = this.getSplitPath(config.pathConfig.path);
+        let schema = this.jsonSchemaMap.get(config.rootPropertyName);
+        // Create a root level property JSON
+        if (!schema) {
+            this.addNewSchema(config.rootPropertyName);
+            schema = this.jsonSchemaMap.get(config.rootPropertyName);
+        }
+        switch (config.pathConfig.type) {
+            case "default":
+            case "access": {
+                if (splitPath.length > 1) {
+                    if (config.pathConfig.currentContext === null) {
+                        this.addPropertiesToAnObject(schema, splitPath.slice(1), config.pathConfig.currentContext);
+                    }
+                    else {
+                        if (!((_a = schema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[splitPath[0]])) {
+                            schema[defsPropertyName] = {
+                                [splitPath[0]]: {},
+                            };
+                        }
+                        this.addPropertiesToAContext(schema[defsPropertyName][splitPath[0]], splitPath.slice(1), config.pathConfig.currentContext);
+                    }
+                }
+                break;
+            }
+            case "repeat": {
+                this.addContext(schema, splitPath.at(-1), // example items
+                config.pathConfig.currentContext, // example item
+                config.pathConfig.parentContext);
+                if (splitPath.length > 2) {
+                    let updatedSchema = schema;
+                    const hasParentContext = !!config.pathConfig.parentContext;
+                    if (hasParentContext) {
+                        updatedSchema = this.addPropertiesToAnObject((_b = schema[defsPropertyName]) === null || _b === void 0 ? void 0 : _b[config.pathConfig.parentContext], splitPath.slice(1, -1), config.pathConfig.parentContext);
+                    }
+                    this.addPropertiesToAnObject(updatedSchema, hasParentContext ? splitPath.slice(2) : splitPath.slice(1), config.pathConfig.currentContext, "array");
+                }
+                else if (splitPath.length > 1) {
+                    let schemaDefinition;
+                    if (config.pathConfig.parentContext) {
+                        schemaDefinition = (_c = schema === null || schema === void 0 ? void 0 : schema[defsPropertyName]) === null || _c === void 0 ? void 0 : _c[config.pathConfig.parentContext];
+                    }
+                    this.addPropertiesToAnObject(schemaDefinition !== null && schemaDefinition !== void 0 ? schemaDefinition : schema, splitPath.slice(1), config.pathConfig.currentContext, "array");
+                }
+                else {
+                    schema.type = "array";
+                    schema[refPropertyName] = this.getDefsPath(config.pathConfig.currentContext);
+                }
+                break;
+            }
+        }
+    }
+    /**
+     * Gets the JSON schema for a property name
+     * @param rootPropertyName - the root property the JSON schema is mapped to
+     * @returns The JSON schema for the root property
+     */
+    getSchema(rootPropertyName) {
+        var _a;
+        return (_a = this.jsonSchemaMap.get(rootPropertyName)) !== null && _a !== void 0 ? _a : null;
+    }
+    /**
+     * Gets root properties
+     * @returns IterableIterator<string>
+     */
+    getRootProperties() {
+        return this.jsonSchemaMap.keys();
+    }
+    /**
+     * Get a path split into property names
+     * @param path The dot syntax path e.g. a.b.c
+     * @returns An array of items in the path
+     */
+    getSplitPath(path) {
+        return path.split(".");
+    }
+    /**
+     * Gets the path to the $def
+     * @param context The context name e.g. {{item in items}} in a repeat creates the "item" context
+     * @returns A string to use as a $ref
+     */
+    getDefsPath(context) {
+        return `#/${defsPropertyName}/${context}`;
+    }
+    /**
+     * Add a new JSON schema to the JSON schema map
+     * @param propertyName The name of the property to assign this JSON schema to
+     */
+    addNewSchema(propertyName) {
+        this.jsonSchemaMap.set(propertyName, {
+            $schema: "https://json-schema.org/draft/2019-09/schema",
+            $id: `https://fast.design/schemas/${this.customElementName}/${propertyName}.json`,
+            [defsPropertyName]: {},
+        });
+    }
+    /**
+     * Add properties to a context
+     * @param schema The schema to add the properties to
+     * @param splitPath The path split into property/context names
+     * @param context The paths context
+     */
+    addPropertiesToAContext(schema, splitPath, context) {
+        schema.type = "object";
+        if (schema.properties && !schema.properties[splitPath[0]]) {
+            schema.properties[splitPath[0]] = {};
+        }
+        else if (!schema.properties) {
+            schema.properties = {
+                [splitPath[0]]: {},
+            };
+        }
+        if (splitPath.length > 1) {
+            this.addPropertiesToAnObject(schema.properties[splitPath[0]], splitPath.slice(1), context);
+        }
+    }
+    /**
+     * Add properties to an object
+     * @param schema The schema to add the properties to
+     * @param splitPath The path split into property/context names
+     * @param context The paths context
+     * @param type The data type (see JSON schema for details)
+     */
+    addPropertiesToAnObject(schema, splitPath, context, type = "object") {
+        schema.type = "object";
+        if (schema.properties && !schema.properties[splitPath[0]]) {
+            schema.properties[splitPath[0]] = {};
+        }
+        else if (!schema.properties) {
+            schema.properties = {
+                [splitPath[0]]: {},
+            };
+        }
+        if (type === "object" && splitPath.length > 1) {
+            return this.addPropertiesToAnObject(schema.properties[splitPath[0]], splitPath.slice(1), context, type);
+        }
+        else if (type === "array") {
+            if (splitPath.length > 1) {
+                return this.addPropertiesToAnObject(schema.properties[splitPath[0]], splitPath.slice(1), context, type);
+            }
+            else {
+                return this.addArrayToAnObject(schema.properties[splitPath[0]], context);
+            }
+        }
+        return schema.properties[splitPath[0]];
+    }
+    /**
+     * Add an array to an object property
+     * @param schema The schema to add the properties to
+     * @param context The name of the context
+     */
+    addArrayToAnObject(schema, context) {
+        schema.type = "array";
+        schema.items = {
+            [refPropertyName]: this.getDefsPath(context),
+        };
+        return schema.items;
+    }
+    /**
+     * Add a context to the $defs property
+     * @param schema The schema to use
+     * @param propertyName The name of the property the context belongs to
+     * @param currentContext The current context
+     * @param parentContext The parent context
+     * @returns
+     */
+    addContext(schema, propertyName, // e.g items
+    currentContext, // e.g. item
+    parentContext) {
+        if (schema[defsPropertyName][currentContext]) {
+            return;
+        }
+        schema[defsPropertyName][currentContext] = {
+            [fastContextMetaData]: propertyName,
+            [fastContextsMetaData]: this.getParentContexts(schema, parentContext),
+        };
+    }
+    /**
+     * Get parent contexts
+     * @param schema The schema to use
+     * @param parentContext The parent context
+     * @param contexts A list of parent contexts
+     * @returns
+     */
+    getParentContexts(schema, parentContext, contexts = []) {
+        var _a;
+        if (parentContext === null) {
+            return [null, ...contexts];
+        }
+        const parentParentContext = (_a = schema === null || schema === void 0 ? void 0 : schema[defsPropertyName]) === null || _a === void 0 ? void 0 : _a[parentContext][fastContextsMetaData];
+        return this.getParentContexts(schema, parentParentContext.at(-1), [parentContext, ...contexts]);
+    }
+}

package/dist/esm/components/schema.spec.js

@@ -0,0 +1,257 @@
+import { __awaiter } from "tslib";
+import { expect, test } from "@playwright/test";
+import { Schema } from "./schema.js";
+test.describe("Schema", () => __awaiter(void 0, void 0, void 0, function* () {
+    test("should instantiate with a custom element name without throwing", () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => new Schema("my-custom-element")).not.toThrow();
+    }));
+    test("should return null when a JSON schema is requested but none exists for that property name", () => __awaiter(void 0, void 0, void 0, function* () {
+        const schema = new Schema("my-custom-element");
+        expect(schema.getSchema("foo")).toEqual(null);
+    }));
+    test("should be able to return a JSON schema after adding a path", () => __awaiter(void 0, void 0, void 0, function* () {
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "default",
+                path: "a",
+                currentContext: null,
+                parentContext: null,
+            }
+        });
+        const schemaA = schema.getSchema("a");
+        expect(schemaA).not.toBe(null);
+        expect(schemaA.$id).toEqual("https://fast.design/schemas/my-custom-element/a.json");
+        expect(schemaA.$schema).toEqual("https://json-schema.org/draft/2019-09/schema");
+    }));
+    test("should add a property and cast the schema as type object if a nested path is given", () => __awaiter(void 0, void 0, void 0, function* () {
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "default",
+                path: "a.b",
+                currentContext: null,
+                parentContext: null,
+            },
+        });
+        let schemaA = schema.getSchema("a");
+        expect(schemaA.properties).toBeDefined();
+        expect(schemaA.properties).toHaveProperty("b");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "default",
+                path: "a.b.c",
+                currentContext: null,
+                parentContext: null,
+            },
+        });
+        schemaA = schema.getSchema("a");
+        expect(schemaA.properties).toBeDefined();
+        expect(schemaA.properties).toHaveProperty("b");
+        expect(schemaA.properties.b.properties).toBeDefined();
+        expect(schemaA.properties.b.properties).toHaveProperty("c");
+    }));
+    test("should add a new context in a schema", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "items",
+            pathConfig: {
+                type: "repeat",
+                path: "items",
+                currentContext: "item",
+                parentContext: null,
+            },
+        });
+        const schemaA = schema.getSchema("items");
+        expect(schemaA).toBeDefined();
+        expect(schemaA.$ref).toBeDefined();
+        expect(schemaA.$ref).toEqual("#/$defs/item");
+        expect(schemaA.type).toEqual("array");
+        expect((_a = schemaA.$defs) === null || _a === void 0 ? void 0 : _a["item"]).toBeDefined();
+        expect((_b = schemaA.$defs) === null || _b === void 0 ? void 0 : _b["item"].$fast_context).toEqual("items");
+        expect((_c = schemaA.$defs) === null || _c === void 0 ? void 0 : _c["item"].$fast_parent_contexts).toEqual([null]);
+    }));
+    test("should add a nested context in a schema", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _d, _e, _f, _g, _h;
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "default",
+                path: "a",
+                currentContext: null,
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "a.items",
+                currentContext: "item",
+                parentContext: null,
+            },
+        });
+        const schemaA = schema.getSchema("a");
+        expect(schemaA).toBeDefined();
+        expect((_d = schemaA === null || schemaA === void 0 ? void 0 : schemaA.properties) === null || _d === void 0 ? void 0 : _d["items"]).toBeDefined();
+        expect((_e = schemaA === null || schemaA === void 0 ? void 0 : schemaA.properties) === null || _e === void 0 ? void 0 : _e["items"].items.$ref).toEqual("#/$defs/item");
+        expect((_f = schemaA.$defs) === null || _f === void 0 ? void 0 : _f["item"]).toBeDefined();
+        expect((_g = schemaA.$defs) === null || _g === void 0 ? void 0 : _g["item"].$fast_context).toEqual("items");
+        expect((_h = schemaA.$defs) === null || _h === void 0 ? void 0 : _h["item"].$fast_parent_contexts).toEqual([null]);
+    }));
+    test("should define an object as a nested context in a schema", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _j, _k, _l, _m, _o, _p, _q;
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "default",
+                path: "a",
+                currentContext: null,
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "a.items",
+                currentContext: "item",
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "access",
+                path: "item.b",
+                currentContext: "item",
+                parentContext: null,
+            },
+        });
+        const schemaA = schema.getSchema("a");
+        expect(schemaA).toBeDefined();
+        expect((_j = schemaA.$defs) === null || _j === void 0 ? void 0 : _j["item"]).toBeDefined();
+        expect((_k = schemaA.$defs) === null || _k === void 0 ? void 0 : _k["item"].$fast_context).toEqual("items");
+        expect((_l = schemaA.$defs) === null || _l === void 0 ? void 0 : _l["item"].$fast_parent_contexts).toEqual([null]);
+        expect((_m = schemaA.$defs) === null || _m === void 0 ? void 0 : _m["item"].type).toEqual("object");
+        expect((_o = schemaA.$defs) === null || _o === void 0 ? void 0 : _o["item"].properties).toBeDefined();
+        expect((_q = (_p = schemaA.$defs) === null || _p === void 0 ? void 0 : _p["item"].properties) === null || _q === void 0 ? void 0 : _q["b"]).toBeDefined();
+    }));
+    test("should define nested contexts in a schema", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _r, _s, _t, _u, _v, _w;
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "default",
+                path: "a",
+                currentContext: null,
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "a.users",
+                currentContext: "user",
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "user.posts",
+                currentContext: "post",
+                parentContext: "user"
+            },
+        });
+        const schemaA = schema.getSchema("a");
+        expect(schemaA).toBeDefined();
+        expect((_r = schemaA.$defs) === null || _r === void 0 ? void 0 : _r["user"]).toBeDefined();
+        expect((_s = schemaA.$defs) === null || _s === void 0 ? void 0 : _s["user"].$fast_context).toEqual("users");
+        expect((_t = schemaA.$defs) === null || _t === void 0 ? void 0 : _t["user"].$fast_parent_contexts).toEqual([null]);
+        expect((_u = schemaA.$defs) === null || _u === void 0 ? void 0 : _u["post"]).toBeDefined();
+        expect((_v = schemaA.$defs) === null || _v === void 0 ? void 0 : _v["post"].$fast_context).toEqual("posts");
+        expect((_w = schemaA.$defs) === null || _w === void 0 ? void 0 : _w["post"].$fast_parent_contexts).toEqual([null, "user"]);
+    }));
+    test("should define nested contexts with objects in a schema", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
+        const schema = new Schema("my-custom-element");
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "a.users",
+                currentContext: "user",
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "access",
+                path: "user.a.b",
+                currentContext: "user",
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "user.posts",
+                currentContext: "post",
+                parentContext: "user"
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "access",
+                path: "post.c.d",
+                currentContext: "post",
+                parentContext: null,
+            },
+        });
+        schema.addPath({
+            rootPropertyName: "a",
+            pathConfig: {
+                type: "repeat",
+                path: "post.meta.tags",
+                currentContext: "tag",
+                parentContext: "post"
+            },
+        });
+        const schemaA = schema.getSchema("a");
+        expect(schemaA).toBeDefined();
+        expect((_x = schemaA.$defs) === null || _x === void 0 ? void 0 : _x["user"]).toBeDefined();
+        expect((_y = schemaA.$defs) === null || _y === void 0 ? void 0 : _y["user"].$fast_context).toEqual("users");
+        expect((_z = schemaA.$defs) === null || _z === void 0 ? void 0 : _z["user"].$fast_parent_contexts).toEqual([null]);
+        expect((_0 = schemaA.$defs) === null || _0 === void 0 ? void 0 : _0["user"].type).toEqual("object");
+        expect((_1 = schemaA.$defs) === null || _1 === void 0 ? void 0 : _1["user"].properties).toBeDefined();
+        expect((_2 = schemaA.$defs) === null || _2 === void 0 ? void 0 : _2["user"].properties["a"]).toBeDefined();
+        expect((_3 = schemaA.$defs) === null || _3 === void 0 ? void 0 : _3["user"].properties["a"].properties["b"]).toBeDefined();
+        expect((_4 = schemaA.$defs) === null || _4 === void 0 ? void 0 : _4["post"]).toBeDefined();
+        expect((_5 = schemaA.$defs) === null || _5 === void 0 ? void 0 : _5["post"].$fast_context).toEqual("posts");
+        expect((_6 = schemaA.$defs) === null || _6 === void 0 ? void 0 : _6["post"].$fast_parent_contexts).toEqual([null, "user"]);
+        expect((_7 = schemaA.$defs) === null || _7 === void 0 ? void 0 : _7["post"].type).toEqual("object");
+        expect((_8 = schemaA.$defs) === null || _8 === void 0 ? void 0 : _8["post"].properties).toBeDefined();
+        expect((_9 = schemaA.$defs) === null || _9 === void 0 ? void 0 : _9["post"].properties["c"]).toBeDefined();
+        expect((_10 = schemaA.$defs) === null || _10 === void 0 ? void 0 : _10["post"].properties["c"].properties["d"]).toBeDefined();
+        expect((_11 = schemaA.$defs) === null || _11 === void 0 ? void 0 : _11["post"].properties["meta"]).toBeDefined();
+        expect((_12 = schemaA.$defs) === null || _12 === void 0 ? void 0 : _12["post"].properties["meta"].properties["tags"]).toBeDefined();
+        expect((_13 = schemaA.$defs) === null || _13 === void 0 ? void 0 : _13["post"].properties["meta"].properties["tags"].items).toBeDefined();
+        expect((_14 = schemaA.$defs) === null || _14 === void 0 ? void 0 : _14["post"].properties["meta"].properties["tags"].items.$ref).toEqual("#/$defs/tag");
+        expect((_15 = schemaA.$defs) === null || _15 === void 0 ? void 0 : _15["tag"]).toBeDefined();
+        expect((_16 = schemaA.$defs) === null || _16 === void 0 ? void 0 : _16["tag"].$fast_context).toEqual("tags");
+        expect((_17 = schemaA.$defs) === null || _17 === void 0 ? void 0 : _17["tag"].$fast_parent_contexts).toEqual([null, "user", "post"]);
+    }));
+}));