Merge branch 'master' into users/nirice/add-background-and-color-to-DSP

packages/tooling/fast-tooling/src/data-utilities/mapping.spec.ts

@@ -920,6 +920,88 @@ describe("htmlMapper", () => {
 
         expect(result).toEqual(mappedElement);
     });
+    test("should map an svg element to data", () => {
+        const dataDictionary: DataDictionary<any> = [
+            {
+                "": {
+                    schemaId: "foo",
+                    data: {},
+                },
+            },
+            "",
+        ];
+        htmlMapper({
+            version: 1,
+            tags: [
+                {
+                    name: "svg",
+                    description: "foobar",
+                    attributes: [],
+                    slots: [],
+                },
+            ],
+        })({
+            dataDictionary,
+            dictionaryId: "",
+            schema: {
+                id: "foo",
+                [ReservedElementMappingKeyword.mapsToTagName]: "svg",
+                type: "object",
+            },
+            mapperPlugins: [],
+        });
+        expect(dataDictionary[0][""].data).toEqual(
+            document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        );
+    });
+    test("should map an svg element with an attribute specifying a URI to data", () => {
+        const dataDictionary: DataDictionary<any> = [
+            {
+                "": {
+                    schemaId: "foo",
+                    data: {},
+                },
+            },
+            "",
+        ];
+        htmlMapper({
+            version: 1,
+            tags: [
+                {
+                    name: "svg",
+                    description: "foobar",
+                    attributes: [
+                        {
+                            name: "foo",
+                            description: "URI override",
+                            type: DataType.string,
+                            default: "http://www.w3.org/2000/svg",
+                            required: true,
+                        },
+                    ],
+                    slots: [],
+                },
+            ],
+        })({
+            dataDictionary,
+            dictionaryId: "",
+            schema: {
+                id: "foo",
+                [ReservedElementMappingKeyword.mapsToTagName]: "svg",
+                type: "object",
+                properties: {
+                    foo: {
+                        title: "URI override",
+                        type: "string",
+                    },
+                },
+            },
+            mapperPlugins: [],
+        });
+        expect(dataDictionary[0][""].data).toEqual(
+            document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        );
+    });
 });
 
 describe("mapWebComponentDefinitionToJSONSchema", () => {

packages/tooling/fast-tooling/src/data-utilities/mapping.ts

@@ -179,6 +179,23 @@ export interface ResolverConfig<T> {
     resolverPlugins: MapDataPlugin[];
 }
 
+const nameSpacedURIs = {
+    svg: "http://www.w3.org/2000/svg",
+};
+const nameSpacedTags = {
+    animate: nameSpacedURIs.svg,
+    svg: nameSpacedURIs.svg,
+    path: nameSpacedURIs.svg,
+    defs: nameSpacedURIs.svg,
+    ellipse: nameSpacedURIs.svg,
+    circle: nameSpacedURIs.svg,
+    line: nameSpacedURIs.svg,
+    polygon: nameSpacedURIs.svg,
+    polyline: nameSpacedURIs.svg,
+    rect: nameSpacedURIs.svg,
+    g: nameSpacedURIs.svg,
+};
+
 export function resolveDataInDataDictionary<T>(
     config: ResolveDataInDataDictionaryConfig<T>
 ): void {
@@ -305,7 +322,14 @@ export function htmlMapper(
             );
 
             if (elementDefinition !== undefined) {
-                const newElement = document.createElement(elementDefinition.name);
+                // Due to SVGs being namespaced they must use the createElementNS method instead of createElement
+                const isNameSpaced = Object.keys(nameSpacedTags).includes(
+                    elementDefinition.name
+                );
+                const uri = nameSpacedTags[elementDefinition.name];
+                const newElement = isNameSpaced
+                    ? document.createElementNS(uri, elementDefinition.name)
+                    : document.createElement(elementDefinition.name);
                 // a list of available slots for this element
                 const availableElementSlots = elementDefinition.slots.map(elementSlot => {
                     return elementSlot.name;

packages/web-components/fast-components-msft/package.json

@@ -15,8 +15,9 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
   },
-  "main": "./dist/esm/index.js",
-  "types": "./dist/fast-components-msft.d.ts",
+  "main": "dist/esm/index.js",
+  "types": "dist/fast-components-msft.d.ts",
+  "unpkg": "dist/fast-components-msft.min.js",
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",

packages/web-components/fast-components/package.json

@@ -15,8 +15,9 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
   },
-  "main": "./dist/esm/index.js",
-  "types": "./dist/fast-components.d.ts",
+  "main": "dist/esm/index.js",
+  "types": "dist/fast-components.d.ts",
+  "unpkg": "dist/fast-components.min.js",
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",

packages/web-components/fast-element/package.json

@@ -15,8 +15,9 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
   },
-  "main": "./dist/esm/index.js",
-  "types": "./dist/fast-element.d.ts",
+  "main": "dist/esm/index.js",
+  "types": "dist/fast-element.d.ts",
+  "unpkg": "dist/fast-element.min.js",
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",

packages/web-components/fast-element/src/observation/observable.ts

@@ -284,7 +284,7 @@ Observable.defineProperty(ExecutionContext.prototype, "length");
  * The default execution context used in binding expressions.
  * @public
  */
-export const defaultExecutionContext = new ExecutionContext();
+export const defaultExecutionContext = Object.seal(new ExecutionContext());
 
 /**
  * The signature of an arrow function capable of being evaluated

packages/web-components/fast-foundation/package.json

@@ -15,8 +15,9 @@
   "bugs": {
     "url": "https://github.com/Microsoft/fast-dna/issues/new/choose"
   },
-  "main": "./dist/esm/index.js",
-  "types": "./dist/fast-foundation.d.ts",
+  "main": "dist/esm/index.js",
+  "types": "dist/fast-foundation.d.ts",
+  "unpkg": "dist/fast-foundation.min.js",
   "scripts": {
     "clean:dist": "node ../../../build/clean.js dist",
     "doc": "api-extractor run --local",

sites/fast-component-explorer/app/config.ts

@@ -2,11 +2,15 @@ import { get, omit } from "lodash-es";
 import { MenuItem } from "@microsoft/fast-tooling-react";
 import { createBrowserHistory } from "history";
 import { SchemaDictionary } from "@microsoft/fast-tooling";
-import { fastComponentSchemas, nativeElementSchemas } from "@microsoft/site-utilities";
-import textSchema from "./utilities/text.schema";
+import {
+    fastComponentSchemas,
+    nativeElementSchemas,
+    textSchema,
+} from "@microsoft/site-utilities";
 import { fastMenuItemId } from "./fast-components/configs/fast-menu";
 import { fastSliderLabelId } from "./fast-components/configs/fast-slider";
 import { fastTabId, fastTabPanelId } from "./fast-components/configs/fast-tabs";
+import { fastDesignSystemProviderId } from "./fast-components/configs/fast-design-system-provider";
 
 const schemaDictionary: SchemaDictionary = {
     ...fastComponentSchemas,
@@ -23,6 +27,7 @@ const menu: MenuItem[] = generateMenu(
         fastSliderLabelId,
         fastTabId,
         fastTabPanelId,
+        fastDesignSystemProviderId,
         ...Object.entries(nativeElementSchemas).map(
             ([, nativeElementSchema]: [string, any]) => {
                 return nativeElementSchema.id;

sites/fast-component-explorer/app/fast-components/configs/fast-anchor.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/anchor/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/fast-components/configs/fast-badge.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/badge/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/fast-components/configs/fast-button.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/button/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/fast-components/configs/fast-card.ts

@@ -1,7 +1,5 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/card/guidance";
-import { imageSchema } from "../../utilities";
 import { ComponentViewConfig } from "./data.props";
 import { fastButtonId } from "./fast-button";
 
@@ -33,7 +31,7 @@ const fastCardConfig: ComponentViewConfig = {
                             id: "root",
                             dataLocation: "Slot",
                         },
-                        schemaId: imageSchema.id,
+                        schemaId: "img",
                         data: {
                             src: "https://placehold.it/300x200/414141",
                         },

sites/fast-component-explorer/app/fast-components/configs/fast-checkbox.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/checkbox/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/fast-components/configs/fast-design-system-provider.ts

@@ -0,0 +1 @@
+export const fastDesignSystemProviderId = "fast-design-system-provider";

sites/fast-component-explorer/app/fast-components/configs/fast-dialog.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/dialog/guidance";
 import { ComponentViewConfig } from "./data.props";
 import { fastButtonId } from "./fast-button";

sites/fast-component-explorer/app/fast-components/configs/fast-menu.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/menu/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/fast-components/configs/fast-radio-group.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/radio-group/guidance";
 import { ComponentViewConfig } from "./data.props";
 import { fastRadioId } from "./fast-radio";

sites/fast-component-explorer/app/fast-components/configs/fast-radio.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/radio/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/fast-components/configs/fast-tabs.ts

@@ -1,5 +1,4 @@
-import { fastComponentSchemas } from "@microsoft/site-utilities";
-import textSchema from "../../utilities/text.schema";
+import { fastComponentSchemas, textSchema } from "@microsoft/site-utilities";
 import Guidance from "../../.tmp/tabs/guidance";
 import { ComponentViewConfig } from "./data.props";
 

sites/fast-component-explorer/app/preview.tsx

@@ -38,7 +38,6 @@ import {
     previewDirection,
     previewTheme,
 } from "./explorer";
-import { nativeElementTags } from "./utilities";
 
 // Prevent tree shaking
 FASTComponents;
@@ -197,21 +196,19 @@ class Preview extends Foundation<
                         tags: Object.entries({
                             ...componentDefinitions,
                             ...nativeElementDefinitions,
-                        })
-                            .reduce(
-                                (
-                                    previousValue: WebComponentDefinitionTag[],
-                                    currentValue: [string, WebComponentDefinition]
-                                ) => {
-                                    if (Array.isArray(currentValue[1].tags)) {
-                                        return previousValue.concat(currentValue[1].tags);
-                                    }
-
-                                    return previousValue;
-                                },
-                                []
-                            )
-                            .concat(nativeElementTags),
+                        }).reduce(
+                            (
+                                previousValue: WebComponentDefinitionTag[],
+                                currentValue: [string, WebComponentDefinition]
+                            ) => {
+                                if (Array.isArray(currentValue[1].tags)) {
+                                    return previousValue.concat(currentValue[1].tags);
+                                }
+
+                                return previousValue;
+                            },
+                            []
+                        ),
                     }),
                     resolver: htmlResolver,
                 })