diff --git a/.prettierrc b/.prettierrc index 3cced35240d..9698214d8fa 100644 --- a/.prettierrc +++ b/.prettierrc @@ -6,7 +6,6 @@ "singleQuote": false, "trailingComma": "es5", "bracketSpacing": true, - "jsxBracketSameLine": false, "arrowParens": "avoid", "htmlWhitespaceSensitivity": "ignore", "endOfLine": "auto" diff --git a/README.md b/README.md index 52be2ecdae7..dc58d4879d9 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ FAST is dedicated to providing support for native Web Components and modern Web * Create reusable UI components with `@microsoft/fast-element`, all based on W3C Web Component standards. * Integrate FAST Web Components with any library, framework, or build system. You can adopt incrementally without re-writing your existing systems. -For an in-depth explanation of FAST [see our docs introduction](https://www.fast.design/docs/introduction/). +For an in-depth explanation of FAST [see our docs introduction](https://fast.design/docs/introduction/). ## Packages diff --git a/beachball.config.js b/beachball.config.js index a6e608a23f8..d443c668857 100644 --- a/beachball.config.js +++ b/beachball.config.js @@ -1,5 +1,4 @@ module.exports = { - disallowedChangeTypes: ["major"], ignorePatterns: [ ".ignore", ".github/", diff --git a/change/@microsoft-fast-element-66c55455-9b64-4d8c-a517-be10925cfd1a.json b/change/@microsoft-fast-element-66c55455-9b64-4d8c-a517-be10925cfd1a.json deleted file mode 100644 index abd7881a4e0..00000000000 --- a/change/@microsoft-fast-element-66c55455-9b64-4d8c-a517-be10925cfd1a.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "Adds support for FASTElement hydration", - "packageName": "@microsoft/fast-element", - "email": "171390049+prabhujayapal@users.noreply.github.com", - "dependentChangeType": "prerelease" -} diff --git a/change/@microsoft-fast-element-b48bc70b-f642-481e-9133-2ba226fa3730.json b/change/@microsoft-fast-element-b48bc70b-f642-481e-9133-2ba226fa3730.json deleted file mode 100644 index f97ff0d9083..00000000000 --- a/change/@microsoft-fast-element-b48bc70b-f642-481e-9133-2ba226fa3730.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Remove yarn and lerna in favor of npm", - "packageName": "@microsoft/fast-element", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/change/@microsoft-fast-element-ed4fc460-a15b-4c5a-adab-36034f4f0c18.json b/change/@microsoft-fast-element-ed4fc460-a15b-4c5a-adab-36034f4f0c18.json deleted file mode 100644 index 7d46a8af07a..00000000000 --- a/change/@microsoft-fast-element-ed4fc460-a15b-4c5a-adab-36034f4f0c18.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "Fix CodeQL issues", - "packageName": "@microsoft/fast-element", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "prerelease" -} diff --git a/change/@microsoft-fast-element-f2045996-cea9-48f5-9786-4a5e9a616135.json b/change/@microsoft-fast-element-f2045996-cea9-48f5-9786-4a5e9a616135.json deleted file mode 100644 index 93f5ea83579..00000000000 --- a/change/@microsoft-fast-element-f2045996-cea9-48f5-9786-4a5e9a616135.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Update tensile-perf dependency", - "packageName": "@microsoft/fast-element", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/change/@microsoft-fast-router-5f3af8f5-0f0d-4cd3-b4d6-e6d9dd2cb1ff.json b/change/@microsoft-fast-router-5f3af8f5-0f0d-4cd3-b4d6-e6d9dd2cb1ff.json deleted file mode 100644 index 5e6c3134920..00000000000 --- a/change/@microsoft-fast-router-5f3af8f5-0f0d-4cd3-b4d6-e6d9dd2cb1ff.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Remove yarn and lerna in favor of npm", - "packageName": "@microsoft/fast-router", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/change/@microsoft-fast-router-8b07e1d4-0e01-4065-9377-aa36685a56ca.json b/change/@microsoft-fast-router-8b07e1d4-0e01-4065-9377-aa36685a56ca.json deleted file mode 100644 index 20d267cf0a0..00000000000 --- a/change/@microsoft-fast-router-8b07e1d4-0e01-4065-9377-aa36685a56ca.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "Fix CodeQL issues", - "packageName": "@microsoft/fast-router", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "prerelease" -} diff --git a/change/@microsoft-fast-ssr-26b4919a-4ff9-459b-9f9a-ea7d6c3724c8.json b/change/@microsoft-fast-ssr-26b4919a-4ff9-459b-9f9a-ea7d6c3724c8.json deleted file mode 100644 index f87184adbf9..00000000000 --- a/change/@microsoft-fast-ssr-26b4919a-4ff9-459b-9f9a-ea7d6c3724c8.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Remove yarn and lerna in favor of npm", - "packageName": "@microsoft/fast-ssr", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/change/@microsoft-fast-ssr-8176173d-9744-4690-9420-c31966e0b3b6.json b/change/@microsoft-fast-ssr-8176173d-9744-4690-9420-c31966e0b3b6.json deleted file mode 100644 index 9d14c6ee303..00000000000 --- a/change/@microsoft-fast-ssr-8176173d-9744-4690-9420-c31966e0b3b6.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Fix a dependency issue with express open redirect vulnerability", - "packageName": "@microsoft/fast-ssr", - "email": "7559015+janechu@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/change/@microsoft-fast-ssr-f22b45fd-23fb-4386-82fa-72d59f744cd6.json b/change/@microsoft-fast-ssr-f22b45fd-23fb-4386-82fa-72d59f744cd6.json deleted file mode 100644 index 5b6f25e4f52..00000000000 --- a/change/@microsoft-fast-ssr-f22b45fd-23fb-4386-82fa-72d59f744cd6.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "Adds support for FASTElement hydration", - "packageName": "@microsoft/fast-ssr", - "email": "171390049+prabhujayapal@users.noreply.github.com", - "dependentChangeType": "prerelease" -} diff --git a/examples/ssr/package.json b/examples/ssr/package.json index 106a14ef8f4..1a5a548907b 100644 --- a/examples/ssr/package.json +++ b/examples/ssr/package.json @@ -23,9 +23,9 @@ "directory": "examples/ssr" }, "dependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26", + "@microsoft/fast-element": "^2.0.0", "@microsoft/fast-foundation": "^3.0.0-alpha.33", - "@microsoft/fast-ssr": "^1.0.0-beta.33", + "@microsoft/fast-ssr": "^1.0.0-beta.35", "express": "^4.19.2", "fast-todo-app": "1.0.0", "ts-loader": "^9.3.0", diff --git a/examples/todo-app/package.json b/examples/todo-app/package.json index 326d97ba9ab..c43646ac72f 100644 --- a/examples/todo-app/package.json +++ b/examples/todo-app/package.json @@ -22,7 +22,7 @@ "directory": "examples/todo-app" }, "dependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26", + "@microsoft/fast-element": "^2.0.0", "@microsoft/fast-foundation": "^3.0.0-alpha.33", "tslib": "^2.6.3" }, diff --git a/package-lock.json b/package-lock.json index 20a4c94e4c2..d5292382600 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,9 +52,9 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26", + "@microsoft/fast-element": "^2.0.0", "@microsoft/fast-foundation": "^3.0.0-alpha.33", - "@microsoft/fast-ssr": "^1.0.0-beta.33", + "@microsoft/fast-ssr": "^1.0.0-beta.35", "express": "^4.19.2", "fast-todo-app": "1.0.0", "ts-loader": "^9.3.0", @@ -70,7 +70,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26", + "@microsoft/fast-element": "^2.0.0", "@microsoft/fast-foundation": "^3.0.0-alpha.33", "tslib": "^2.6.3" }, @@ -5999,24 +5999,6 @@ "@types/ms": "*" } }, - "node_modules/@types/eslint": { - "version": "8.56.10", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz", - "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==", - "dependencies": { - "@types/estree": "*", - "@types/json-schema": "*" - } - }, - "node_modules/@types/eslint-scope": { - "version": "3.7.7", - "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", - "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", - "dependencies": { - "@types/eslint": "*", - "@types/estree": "*" - } - }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -7489,10 +7471,11 @@ } }, "node_modules/axios": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", - "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", "dev": true, + "license": "MIT", "peer": true, "dependencies": { "follow-redirects": "^1.15.6", @@ -11717,9 +11700,10 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.17.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz", - "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==", + "version": "5.17.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz", + "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -21559,9 +21543,10 @@ ] }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "license": "MIT", "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -29849,11 +29834,11 @@ } }, "node_modules/webpack": { - "version": "5.92.1", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz", - "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==", + "version": "5.94.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz", + "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==", + "license": "MIT", "dependencies": { - "@types/eslint-scope": "^3.7.3", "@types/estree": "^1.0.5", "@webassemblyjs/ast": "^1.12.1", "@webassemblyjs/wasm-edit": "^1.12.1", @@ -29862,7 +29847,7 @@ "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.17.0", + "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", @@ -30980,7 +30965,7 @@ }, "packages/web-components/fast-element": { "name": "@microsoft/fast-element", - "version": "2.0.0-beta.26", + "version": "2.0.0", "license": "MIT", "devDependencies": { "@jsdevtools/coverage-istanbul-loader": "^3.0.5", @@ -31026,10 +31011,10 @@ }, "packages/web-components/fast-router": { "name": "@microsoft/fast-router", - "version": "1.0.0-alpha.27", + "version": "1.0.0-alpha.28", "license": "MIT", "dependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26" + "@microsoft/fast-element": "^2.0.0" }, "devDependencies": { "@jsdevtools/coverage-istanbul-loader": "^3.0.5", @@ -31142,7 +31127,7 @@ }, "packages/web-components/fast-ssr": { "name": "@microsoft/fast-ssr", - "version": "1.0.0-beta.33", + "version": "1.0.0-beta.35", "license": "MIT", "dependencies": { "parse5": "^6.0.1", @@ -31150,7 +31135,7 @@ }, "devDependencies": { "@microsoft/api-extractor": "^7.47.0", - "@microsoft/fast-element": "^2.0.0-beta.26", + "@microsoft/fast-element": "^2.0.0", "@microsoft/fast-foundation": "^3.0.0-alpha.33", "@playwright/test": "^1.41.2", "@types/express": "^4.17.21", @@ -31159,7 +31144,7 @@ "typescript": "~5.3.0" }, "peerDependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26" + "@microsoft/fast-element": "^2.0.0" } }, "packages/web-components/fast-ssr/node_modules/@types/node": { diff --git a/packages/web-components/fast-element/CHANGELOG.json b/packages/web-components/fast-element/CHANGELOG.json index 7b3ab5a1209..36849b7dcd2 100644 --- a/packages/web-components/fast-element/CHANGELOG.json +++ b/packages/web-components/fast-element/CHANGELOG.json @@ -1,6 +1,61 @@ { "name": "@microsoft/fast-element", "entries": [ + { + "date": "Mon, 19 Aug 2024 22:04:19 GMT", + "version": "2.0.0", + "tag": "@microsoft/fast-element_v2.0.0", + "comments": { + "major": [ + { + "author": "13071055+chrisdholt@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "630a5e25a953201afa016e54aa77cf68d9d7663a", + "comment": "Update @microsoft/fast-element to major version" + } + ], + "none": [ + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "78910b1158a6a24b717b3d94616fa93ab6786ab4", + "comment": "Remove yarn and lerna in favor of npm" + }, + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "97bf7097a3d85df153df3528a450d7d65dd9b1cc", + "comment": "Add api-extractor generated docs for di and context export paths" + }, + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "4f166dc4fb83cca168b1f284da21fc6979fd1420", + "comment": "Update tensile-perf dependency" + }, + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "92e82f74b9ec0e5eb28895a6aba6426224ee434d", + "comment": "Add working with decorators doc and updated api-report markdown" + } + ], + "prerelease": [ + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "035aefc8a25f4f75f3eb2e8cfb4dd0c60e0d2f67", + "comment": "Fix CodeQL issues" + }, + { + "author": "171390049+prabhujayapal@users.noreply.github.com", + "package": "@microsoft/fast-element", + "commit": "882eded0b9dbc7d129ae4e634878024a0d7ffc08", + "comment": "Adds support for FASTElement hydration" + } + ] + } + }, { "date": "Thu, 20 Jun 2024 17:00:56 GMT", "version": "2.0.0-beta.26", diff --git a/packages/web-components/fast-element/CHANGELOG.md b/packages/web-components/fast-element/CHANGELOG.md index 7982fdfc0c8..6292688a3db 100644 --- a/packages/web-components/fast-element/CHANGELOG.md +++ b/packages/web-components/fast-element/CHANGELOG.md @@ -1,9 +1,22 @@ # Change Log - @microsoft/fast-element -This log was last generated on Fri, 18 Aug 2023 00:04:40 GMT and should not be manually modified. +This log was last generated on Mon, 19 Aug 2024 22:04:19 GMT and should not be manually modified. +## 2.0.0 + +Mon, 19 Aug 2024 22:04:19 GMT + +### Major changes + +- Update @microsoft/fast-element to major version (13071055+chrisdholt@users.noreply.github.com) + +### Changes + +- Fix CodeQL issues (7559015+janechu@users.noreply.github.com) +- Adds support for FASTElement hydration (171390049+prabhujayapal@users.noreply.github.com) + ## 2.0.0-beta.26 Fri, 18 Aug 2023 00:04:40 GMT diff --git a/packages/web-components/fast-element/README.md b/packages/web-components/fast-element/README.md index b540c851fe6..9f41e02094b 100644 --- a/packages/web-components/fast-element/README.md +++ b/packages/web-components/fast-element/README.md @@ -9,7 +9,7 @@ The `fast-element` library is a lightweight means to easily build performant, me ### From NPM -To install the `fast-element` library using `npm`: +To install the latest `fast-element` library using `npm`: ```shell npm install --save @microsoft/fast-element diff --git a/packages/web-components/fast-element/api-extractor.context.json b/packages/web-components/fast-element/api-extractor.context.json new file mode 100644 index 00000000000..b9c3b28e30b --- /dev/null +++ b/packages/web-components/fast-element/api-extractor.context.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "../../../api-extractor.json", + "mainEntryPointFilePath": "./dist/dts/context.d.ts", + "apiReport": { + "enabled": true, + "reportFolder": "/docs/context", + "reportFileName": "api-report" + }, + "docModel": { + "enabled": true, + "apiJsonFilePath": "/dist/context/context.api.json" + } + } \ No newline at end of file diff --git a/packages/web-components/fast-element/api-extractor.di.json b/packages/web-components/fast-element/api-extractor.di.json new file mode 100644 index 00000000000..3deb3f8f9f7 --- /dev/null +++ b/packages/web-components/fast-element/api-extractor.di.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "../../../api-extractor.json", + "mainEntryPointFilePath": "./dist/dts/di/di.d.ts", + "apiReport": { + "enabled": true, + "reportFolder": "/docs/di", + "reportFileName": "api-report" + }, + "docModel": { + "enabled": true, + "apiJsonFilePath": "/dist/di/di.api.json" + } + } \ No newline at end of file diff --git a/packages/web-components/fast-element/docs/context/api-report.api.md b/packages/web-components/fast-element/docs/context/api-report.api.md new file mode 100644 index 00000000000..f7d84f5f86e --- /dev/null +++ b/packages/web-components/fast-element/docs/context/api-report.api.md @@ -0,0 +1,69 @@ +## API Report File for "@microsoft/fast-element" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +// @public +export type Context = { + readonly name: string; + readonly initialValue?: T; +}; + +// @public +export const Context: Readonly<{ + eventType: "context-request"; + for(name: string): FASTContext; + create(name: string, initialValue?: T_1 | undefined): FASTContext; + setDefaultRequestStrategy(strategy: FASTContextRequestStrategy): void; + get(target: EventTarget, context: T_2): ContextType; + request(target: EventTarget, context: T_3, callback: ContextCallback>, multiple?: boolean): void; + dispatch(target: EventTarget, context: T_4, callback: ContextCallback>, multiple?: boolean): void; + provide(target: EventTarget, context: T_5, value: ContextType): void; + handle(target: EventTarget, callback: (event: ContextEvent) => void, context?: T_6 | undefined): void; + defineProperty(target: Constructable | EventTarget, propertyName: string, context: T_7): void; +}>; + +// @public +export type ContextCallback = (value: ValueType, dispose?: () => void) => void; + +// Warning: (ae-forgotten-export) The symbol "ParameterDecorator_2" needs to be exported by the entry point context.d.ts +// +// @public +export type ContextDecorator = Readonly> & PropertyDecorator & ParameterDecorator_2; + +// @public +export class ContextEvent extends Event { + constructor(context: T, callback: ContextCallback>, multiple?: boolean | undefined); + // (undocumented) + readonly callback: ContextCallback>; + // (undocumented) + readonly context: T; + // (undocumented) + readonly multiple?: boolean | undefined; +} + +// @public +export type ContextType = T extends Context ? Y : never; + +// @public +export type FASTContext = ContextDecorator & { + get(target: EventTarget): T; + provide(target: EventTarget, value: T): void; + request(target: EventTarget, callback: ContextCallback, multiple?: boolean): void; + handle(target: EventTarget, callback: (event: ContextEvent>) => void): void; +}; + +// @public +export type FASTContextRequestStrategy = (target: EventTarget, context: T, callback: ContextCallback>, multiple: any) => void; + +// @public +export type UnknownContext = Context; + +// Warnings were encountered during analysis: +// +// dist/dts/context.d.ts:127:5 - (ae-forgotten-export) The symbol "Constructable" needs to be exported by the entry point context.d.ts + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/web-components/fast-element/docs/di/api-report.api.md b/packages/web-components/fast-element/docs/di/api-report.api.md new file mode 100644 index 00000000000..6ee503bc3be --- /dev/null +++ b/packages/web-components/fast-element/docs/di/api-report.api.md @@ -0,0 +1,315 @@ +## API Report File for "@microsoft/fast-element" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +// @public +export const all: (key: any, searchAncestors?: boolean) => ReturnType; + +// @public +export type AsyncRegistrationLocator = (key: Key) => Promise; + +// @public +export interface Container extends ServiceLocator { + createChild(config?: Partial>): Container; + getFactory(key: T): Factory; + getResolver(key: K | Key, autoRegister?: boolean): Resolver | null; + register(...params: any[]): Container; + // Warning: (ae-forgotten-export) The symbol "Constructable" needs to be exported by the entry point di.d.ts + registerFactory(key: T, factory: Factory): void; + registerResolver(key: K, resolver: Resolver): Resolver; + registerTransformer(key: K, transformer: Transformer_2): boolean; +} + +// Warning: (ae-forgotten-export) The symbol "ContextDecorator" needs to be exported by the entry point di.d.ts +// +// @public +export const Container: ContextDecorator; + +// @public +export interface ContainerConfiguration { + asyncRegistrationLocator: AsyncRegistrationLocator; + defaultResolver(key: Key, handler: Container): Resolver; + parentLocator: ParentLocator; + responsibleForOwnerRequests: boolean; +} + +// @public +export const ContainerConfiguration: Readonly<{ + default: Readonly; +}>; + +// Warning: (ae-internal-missing-underscore) The name "ContainerImpl" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class ContainerImpl implements DOMContainer { + constructor(owner: any, config: ContainerConfiguration); + // (undocumented) + protected config: ContainerConfiguration; + // (undocumented) + createChild(config?: Partial>): Container; + // (undocumented) + get depth(): number; + // (undocumented) + get(key: K): Resolved; + // (undocumented) + getAll(key: K, searchAncestors?: boolean): readonly Resolved[]; + // (undocumented) + getAsync(key: K): Promise>; + // (undocumented) + getFactory(Type: K): Factory; + // (undocumented) + getResolver(key: K | Key, autoRegister?: boolean): Resolver | null; + // (undocumented) + handleContextRequests(enable: boolean): void; + // (undocumented) + has(key: K, searchAncestors?: boolean): boolean; + // (undocumented) + protected owner: any; + // (undocumented) + get parent(): ContainerImpl | null; + // (undocumented) + register(...params: any[]): Container; + // (undocumented) + registerFactory(key: K, factory: Factory): void; + // (undocumented) + registerResolver(key: K, resolver: Resolver): Resolver; + // (undocumented) + registerTransformer(key: K, transformer: Transformer_2): boolean; + // (undocumented) + get responsibleForOwnerRequests(): boolean; +} + +// @public +export const DefaultResolver: Readonly<{ + none(key: Key): Resolver; + singleton(key: Key): Resolver; + transient(key: Key): Resolver; +}>; + +// @public +export const DI: Readonly<{ + installAsContextRequestStrategy(fallback?: () => DOMContainer): void; + createContainer(config?: Partial): Container; + findResponsibleContainer(target: EventTarget, fallback?: () => DOMContainer): DOMContainer; + findParentContainer(target: EventTarget, fallback?: () => DOMContainer): DOMContainer; + getOrCreateDOMContainer(target?: EventTarget, config?: Partial>): DOMContainer; + getDependencies(Type: Constructable | Injectable): Key[]; + defineProperty(target: {}, propertyName: string, key: Key, respectConnection?: boolean): void; + createContext: typeof createContext; + inject(...dependencies: Key[]): (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void; + transient>(target: T & Partial>): T & RegisterSelf; + singleton>(target: T_1 & Partial>, options?: SingletonOptions): T_1 & RegisterSelf; +}>; + +// @public +export interface DOMContainer extends Container { + // @beta + handleContextRequests(enable: boolean): void; +} + +// @public +export const DOMContainer: ContextDecorator; + +// @public +export interface Factory { + construct(container: Container, dynamicDependencies?: Key[]): Resolved; + constructAsync(container: Container, dynamicDependencies?: Key[]): Promise>; + registerTransformer(transformer: Transformer_2): void; + readonly Type: T; +} + +// Warning: (ae-internal-missing-underscore) The name "FactoryImpl" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class FactoryImpl implements Factory { + constructor(Type: T, dependencies: Key[]); + // (undocumented) + construct(container: Container, dynamicDependencies?: Key[]): Resolved; + // (undocumented) + constructAsync(container: Container, dynamicDependencies?: Key[]): Promise>; + // (undocumented) + registerTransformer(transformer: (instance: any) => any): void; + // (undocumented) + Type: T; +} + +// @public +export function ignore(target: Injectable, property?: string | number, descriptor?: PropertyDescriptor | number): void; + +// @public +export const inject: (...dependencies: Key[]) => (target: any, key?: string | number, descriptor?: PropertyDescriptor | number) => void; + +// @public +export type Injectable = Constructable & { + inject?: Key[]; +}; + +// @public +export interface InterfaceConfiguration { + friendlyName?: string; + respectConnection?: boolean; +} + +// @public +export type Key = PropertyKey | object | ContextDecorator | Constructable | Resolver; + +// @public +export const lazy: (key: any) => any; + +// @public +export const newInstanceForScope: (key: any) => any; + +// @public +export const newInstanceOf: (key: any) => any; + +// @public +export const optional: (key: any) => any; + +// @public +export type ParentLocator = (owner: any) => Container | null; + +// @public +export type RegisterSelf = { + register(container: Container): Resolver>; + registerInRequestor: boolean; +}; + +// @public +export interface Registration { + register(container: Container): Resolver; +} + +// @public +export const Registration: Readonly<{ + instance(key: Key, value: T): Registration; + singleton>(key: Key, value: T_1): Registration>; + transient>(key: Key, value: T_2): Registration>; + callback(key: Key, callback: ResolveCallback): Registration>; + cachedCallback(key: Key, callback: ResolveCallback): Registration>; + aliasTo(originalKey: T_5, aliasKey: Key): Registration>; +}>; + +// @public +export interface Registry { + register(container: Container, ...params: unknown[]): void | Resolver; +} + +// @public +export type ResolveCallback = (handler: Container, requestor: Container, resolver: Resolver) => T; + +// Warning: (ae-forgotten-export) The symbol "ResolverLike" needs to be exported by the entry point di.d.ts +// +// @public +export type Resolved = K extends ContextDecorator ? T : K extends Constructable ? InstanceType : K extends ResolverLike ? T1 extends Constructable ? InstanceType : T1 : K; + +// @public +export interface Resolver extends ResolverLike { +} + +// @public +export class ResolverBuilder { + constructor(container: Container, key: Key); + aliasTo(destinationKey: Key): Resolver; + cachedCallback(value: ResolveCallback): Resolver; + callback(value: ResolveCallback): Resolver; + instance(value: K): Resolver; + singleton(value: Constructable): Resolver; + transient(value: Constructable): Resolver; +} + +// Warning: (ae-internal-missing-underscore) The name "ResolverImpl" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class ResolverImpl implements Resolver, Registration { + // (undocumented) + get $isResolver(): true; + constructor(key: Key, strategy: ResolverStrategy, state: any); + // (undocumented) + getFactory(container: Container): Factory | null; + // (undocumented) + key: Key; + // (undocumented) + register(container: Container): Resolver; + // (undocumented) + resolve(handler: Container, requestor: Container): any; + // (undocumented) + resolveAsync(handler: Container, requestor: Container): Promise; + // (undocumented) + state: any; + // (undocumented) + strategy: ResolverStrategy; +} + +// Warning: (ae-internal-missing-underscore) The name "ResolverStrategy" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const enum ResolverStrategy { + // (undocumented) + alias = 5, + // (undocumented) + array = 4, + // (undocumented) + callback = 3, + // (undocumented) + instance = 0, + // (undocumented) + singleton = 1, + // (undocumented) + transient = 2 +} + +// @public +export interface ServiceLocator { + get(key: K): Resolved; + get(key: Key): Resolved; + get(key: K | Key): Resolved; + getAll(key: K, searchAncestors?: boolean): readonly Resolved[]; + getAll(key: Key, searchAncestors?: boolean): readonly Resolved[]; + getAll(key: K | Key, searchAncestors?: boolean): readonly Resolved[]; + getAsync(key: K): Promise>; + getAsync(key: Key): Promise>; + getAsync(key: K | Key): Promise>; + has(key: K | Key, searchAncestors: boolean): boolean; +} + +// @public +export const ServiceLocator: ContextDecorator; + +// Warning: (ae-forgotten-export) The symbol "singletonDecorator" needs to be exported by the entry point di.d.ts +// +// @public +export function singleton(): typeof singletonDecorator; + +// @public (undocumented) +export function singleton(options?: SingletonOptions): typeof singletonDecorator; + +// @public +export function singleton(target: T & Partial>): T & RegisterSelf; + +// @public +type Transformer_2 = (instance: Resolved) => Resolved; +export { Transformer_2 as Transformer } + +// Warning: (ae-forgotten-export) The symbol "transientDecorator" needs to be exported by the entry point di.d.ts +// +// @public +export function transient(): typeof transientDecorator; + +// @public +export function transient(target: T & Partial>): T & RegisterSelf; + +// Warning: (ae-internal-missing-underscore) The name "validateKey" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export function validateKey(key: any): void; + +// Warnings were encountered during analysis: +// +// dist/dts/di/di.d.ts:479:5 - (ae-forgotten-export) The symbol "createContext" needs to be exported by the entry point di.d.ts +// dist/dts/di/di.d.ts:540:5 - (ae-forgotten-export) The symbol "SingletonOptions" needs to be exported by the entry point di.d.ts + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json index 0ec48477a79..1607983c51f 100644 --- a/packages/web-components/fast-element/package.json +++ b/packages/web-components/fast-element/package.json @@ -1,7 +1,7 @@ { "name": "@microsoft/fast-element", "description": "A library for constructing Web Components", - "version": "2.0.0-beta.26", + "version": "2.0.0", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4" @@ -95,7 +95,9 @@ "clean:dist": "node ../../../build/clean.js dist", "doc": "api-extractor run --local", "doc:ci": "api-extractor run", - "build": "npm run build:tsc && npm run build:rollup && npm run doc", + "doc:exports": "node ./scripts/run-api-extractor.js", + "doc:exports:ci": "node ./scripts/run-api-extractor.js ci", + "build": "npm run build:tsc && npm run build:rollup && npm run doc && npm run doc:exports", "build:rollup": "rollup -c", "build:tsc": "tsc -p ./tsconfig.json", "dev": "tsc -p ./tsconfig.json -w", @@ -105,7 +107,7 @@ "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different", "eslint": "eslint . --ext .ts", "eslint:fix": "eslint . --ext .ts --fix", - "test": "npm run eslint && npm run test-chrome:verbose && npm run doc:ci", + "test": "npm run eslint && npm run test-chrome:verbose && npm run doc:ci && npm run doc:exports:ci", "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'", "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'", "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage", diff --git a/packages/web-components/fast-element/scripts/run-api-extractor.js b/packages/web-components/fast-element/scripts/run-api-extractor.js new file mode 100644 index 00000000000..1875e610a94 --- /dev/null +++ b/packages/web-components/fast-element/scripts/run-api-extractor.js @@ -0,0 +1,51 @@ +import path from "path"; +import fs from "fs"; +import { fileURLToPath } from 'url'; +import { Extractor, ExtractorConfig } from '@microsoft/api-extractor'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export const exportPaths = [ + { + path: "./context.js", + docsFolder: "context", + configPath: path.resolve(__dirname, "../api-extractor.context.json") + }, + { + path: "./di.js", + docsFolder: "di", + configPath: path.resolve(__dirname, "../api-extractor.di.json") + } +]; + +(function() { + exportPaths.forEach((exportPath) => { + const docsFolder = path.resolve(__dirname, `../docs/${exportPath.docsFolder}`); + // Create folders in the docs directory + if (!fs.existsSync(docsFolder)) { + fs.mkdirSync(docsFolder); + } + + // Load and parse the api-extractor.json file + const extractorConfig = ExtractorConfig.loadFileAndPrepare(exportPath.configPath); + + // Invoke API Extractor + const extractorResult = Extractor.invoke( + extractorConfig, + { + // Equivalent to the "--local" command-line parameter + localBuild: process.argv[2] !== "ci", + } + ); + + if (extractorResult.succeeded) { + console.log(`API Extractor completed successfully for ${exportPath.configPath}`); + } else { + console.error( + `API Extractor completed with ${extractorResult.errorCount} errors` + + ` and ${extractorResult.warningCount} warnings for ${exportPath.configPath}` + ); + } + }); +})(); diff --git a/packages/web-components/fast-router/CHANGELOG.json b/packages/web-components/fast-router/CHANGELOG.json index f5628a58008..9969078f634 100644 --- a/packages/web-components/fast-router/CHANGELOG.json +++ b/packages/web-components/fast-router/CHANGELOG.json @@ -1,6 +1,41 @@ { "name": "@microsoft/fast-router", "entries": [ + { + "date": "Mon, 19 Aug 2024 22:04:19 GMT", + "version": "1.0.0-alpha.28", + "tag": "@microsoft/fast-router_v1.0.0-alpha.28", + "comments": { + "none": [ + { + "author": "13071055+chrisdholt@users.noreply.github.com", + "package": "@microsoft/fast-router", + "commit": "630a5e25a953201afa016e54aa77cf68d9d7663a", + "comment": "update beachball and move disallowedChangeTypes to package.json" + }, + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-router", + "commit": "78910b1158a6a24b717b3d94616fa93ab6786ab4", + "comment": "Remove yarn and lerna in favor of npm" + } + ], + "prerelease": [ + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-router", + "commit": "035aefc8a25f4f75f3eb2e8cfb4dd0c60e0d2f67", + "comment": "Fix CodeQL issues" + }, + { + "author": "beachball", + "package": "@microsoft/fast-router", + "comment": "Bump @microsoft/fast-element to v2.0.0", + "commit": "not available" + } + ] + } + }, { "date": "Thu, 20 Jun 2024 17:00:56 GMT", "version": "1.0.0-alpha.27", diff --git a/packages/web-components/fast-router/CHANGELOG.md b/packages/web-components/fast-router/CHANGELOG.md index c20d93fc476..58a7ac2db2d 100644 --- a/packages/web-components/fast-router/CHANGELOG.md +++ b/packages/web-components/fast-router/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @microsoft/fast-router -This log was last generated on Thu, 20 Jun 2024 17:00:56 GMT and should not be manually modified. +This log was last generated on Mon, 19 Aug 2024 22:04:19 GMT and should not be manually modified. +## 1.0.0-alpha.28 + +Mon, 19 Aug 2024 22:04:19 GMT + +### Changes + +- Fix CodeQL issues (7559015+janechu@users.noreply.github.com) +- Bump @microsoft/fast-element to v2.0.0 + ## 1.0.0-alpha.27 Thu, 20 Jun 2024 17:00:56 GMT diff --git a/packages/web-components/fast-router/package.json b/packages/web-components/fast-router/package.json index 22463949ab7..74135a4402d 100644 --- a/packages/web-components/fast-router/package.json +++ b/packages/web-components/fast-router/package.json @@ -2,7 +2,7 @@ "name": "@microsoft/fast-router", "description": "A web-components-based router.", "sideEffects": false, - "version": "1.0.0-alpha.27", + "version": "1.0.0-alpha.28", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4" @@ -81,6 +81,14 @@ "webpack-cli": "^5.1.4" }, "dependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26" + "@microsoft/fast-element": "^2.0.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "minor", + "patch" + ], + "tag": "alpha" } } diff --git a/packages/web-components/fast-ssr/CHANGELOG.json b/packages/web-components/fast-ssr/CHANGELOG.json index a7127b5f736..551e0bef7d1 100644 --- a/packages/web-components/fast-ssr/CHANGELOG.json +++ b/packages/web-components/fast-ssr/CHANGELOG.json @@ -1,6 +1,47 @@ { "name": "@microsoft/fast-ssr", "entries": [ + { + "date": "Mon, 19 Aug 2024 22:04:19 GMT", + "version": "1.0.0-beta.35", + "tag": "@microsoft/fast-ssr_v1.0.0-beta.35", + "comments": { + "none": [ + { + "author": "13071055+chrisdholt@users.noreply.github.com", + "package": "@microsoft/fast-ssr", + "commit": "630a5e25a953201afa016e54aa77cf68d9d7663a", + "comment": "update beachball and move disallowedChangeTypes to package.json" + }, + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-ssr", + "commit": "02762acdca5412565acb89fb5b985fb5453347e1", + "comment": "Fix a dependency issue with express open redirect vulnerability" + }, + { + "author": "7559015+janechu@users.noreply.github.com", + "package": "@microsoft/fast-ssr", + "commit": "78910b1158a6a24b717b3d94616fa93ab6786ab4", + "comment": "Remove yarn and lerna in favor of npm" + } + ], + "prerelease": [ + { + "author": "171390049+prabhujayapal@users.noreply.github.com", + "package": "@microsoft/fast-ssr", + "commit": "882eded0b9dbc7d129ae4e634878024a0d7ffc08", + "comment": "Adds support for FASTElement hydration" + }, + { + "author": "beachball", + "package": "@microsoft/fast-ssr", + "comment": "Bump @microsoft/fast-element to v2.0.0", + "commit": "not available" + } + ] + } + }, { "date": "Thu, 20 Jun 2024 17:00:56 GMT", "version": "1.0.0-beta.33", diff --git a/packages/web-components/fast-ssr/CHANGELOG.md b/packages/web-components/fast-ssr/CHANGELOG.md index f88074bcfe1..4b736d4cd46 100644 --- a/packages/web-components/fast-ssr/CHANGELOG.md +++ b/packages/web-components/fast-ssr/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @microsoft/fast-ssr -This log was last generated on Thu, 20 Jun 2024 17:00:56 GMT and should not be manually modified. +This log was last generated on Mon, 19 Aug 2024 22:04:19 GMT and should not be manually modified. +## 1.0.0-beta.35 + +Mon, 19 Aug 2024 22:04:19 GMT + +### Changes + +- Adds support for FASTElement hydration (171390049+prabhujayapal@users.noreply.github.com) +- Bump @microsoft/fast-element to v2.0.0 + ## 1.0.0-beta.33 Thu, 20 Jun 2024 17:00:56 GMT diff --git a/packages/web-components/fast-ssr/package.json b/packages/web-components/fast-ssr/package.json index 1e4aff2610f..08f1bff4620 100644 --- a/packages/web-components/fast-ssr/package.json +++ b/packages/web-components/fast-ssr/package.json @@ -1,6 +1,6 @@ { "name": "@microsoft/fast-ssr", - "version": "1.0.0-beta.33", + "version": "1.0.0-beta.35", "type": "module", "author": { "name": "Microsoft", @@ -56,10 +56,10 @@ "tslib": "^2.6.3" }, "peerDependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26" + "@microsoft/fast-element": "^2.0.0" }, "devDependencies": { - "@microsoft/fast-element": "^2.0.0-beta.26", + "@microsoft/fast-element": "^2.0.0", "@microsoft/fast-foundation": "^3.0.0-alpha.33", "@microsoft/api-extractor": "^7.47.0", "@playwright/test": "^1.41.2", @@ -67,5 +67,13 @@ "@types/node": "^17.0.17", "express": "^4.19.2", "typescript": "~5.3.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "minor", + "patch" + ], + "tag": "beta" } } diff --git a/sites/website/docusaurus.config.js b/sites/website/docusaurus.config.js index 252d88e7d69..fe6b99be195 100644 --- a/sites/website/docusaurus.config.js +++ b/sites/website/docusaurus.config.js @@ -1,8 +1,10 @@ +import {themes as prismThemes} from 'prism-react-renderer'; + module.exports = { title: "FAST", tagline: "The adaptive interface system for modern web experiences", - url: "https://microsoft.github.io", - baseUrl: "/fast/", + url: "https://www.fast.design", + baseUrl: "/", deploymentBranch: "gh-pages", trailingSlash: false, favicon: "/favicon.ico", @@ -13,11 +15,21 @@ module.exports = { mermaid: true, }, themes: [ - require.resolve("@docusaurus/theme-live-codeblock"), + "@docusaurus/theme-live-codeblock", "@docusaurus/theme-mermaid", ], staticDirectories: ["static"], themeConfig: { + prism: { + theme: prismThemes.vsDark, + }, + announcementBar: { + id: 'version', + content: + '@microsoft/fast-element v2 is out! 🎉️', + backgroundColor: 'var(--ifm-color-success-darkest)', + textColor: 'var(--ifm-color-white)', + }, colorMode: { defaultMode: "dark", }, @@ -140,14 +152,7 @@ module.exports = { sidebarPath: "./sidebars.js", // Refer to https://github.com/microsoft/fast/issues/5865 effects of using true showLastUpdateTime: false, - // remarkPlugins: [require("mdx-mermaid")], - // The "includeCurrentVersion" plugin includes the ./docs folder of the docs - setting to false as current docs are in progress - // TODO: remove when ready to display both the current and legacy versions (line 155) - includeCurrentVersion: false, - // The "lastVersion" plugin sets which version the /docs route refers to - // TODO: update lastVersion to "current" when ready for /docs route to be set to the current version (line 158) lastVersion: "current", - // TODO: Uncomment to begin displaying the doc versions labels (lines 160-167) versions: { current: { label: "2.x", diff --git a/sites/website/sidebars.js b/sites/website/sidebars.js index 5d74b5931f6..af651d2218a 100644 --- a/sites/website/sidebars.js +++ b/sites/website/sidebars.js @@ -41,7 +41,7 @@ module.exports = { }, items: [ "advanced/working-with-custom-elements", - "advanced/component-libraries", + "advanced/working-without-decorators", "advanced/dependency-injection", ], }, @@ -54,6 +54,7 @@ module.exports = { items: [ { type: "doc", + label: "@microsoft/fast-element", id: "api/fast-element", customProps: { description: @@ -61,6 +62,22 @@ module.exports = { keywords: ["fast-element"], }, }, + { + type: "doc", + label: "@microsoft/fast-element/context.js", + id: "api/fast-element/context/fast-element", + customProps: { + keywords: ["context"], + }, + }, + { + type: "doc", + label: "@microsoft/fast-element/di.js", + id: "api/fast-element/di/fast-element", + customProps: { + keywords: ["dependency injection"], + }, + } ], }, { diff --git a/sites/website/src/css/custom.css b/sites/website/src/css/custom.css index 385c7c40753..9346597567e 100644 --- a/sites/website/src/css/custom.css +++ b/sites/website/src/css/custom.css @@ -70,13 +70,6 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark { color: var(--ifm-color-primary) !important; } -.docusaurus-highlight-code-line { - background-color: #212121; - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); -} - .example-dialog::part(control) { --dialog-width: 400px; --dialog-height: auto; @@ -87,3 +80,276 @@ html[data-theme="dark"] .DocSearch-Hit[aria-selected="true"] a mark { background: var(--ifm-color-primary); color: var(--ifm-color-secondary); } + +/** + * Any CSS for the front page + */ +.frontpage { + --body-font: aktiv-grotesk, "Segoe UI", Arial, Helvetica, sans-serif; + --base-height-multiplier: 10; + --base-horizontal-spacing-multiplier: 3; + --control-corner-radius: 4; + --density: 0; + --design-unit: 4; + --direction: ltr; + --disabled-opacity: 0.3; + --stroke-width: 1; + --focus-stroke-width: 2; + --type-ramp-base-font-size: 14px; + --type-ramp-base-line-height: 20px; + --type-ramp-minus-1-font-size: 12px; + --type-ramp-minus-1-line-height: 16px; + --type-ramp-minus-2-font-size: 10px; + --type-ramp-minus-2-line-height: 16px; + --type-ramp-plus-1-font-size: 16px; + --type-ramp-plus-1-line-height: 24px; + --type-ramp-plus-2-font-size: 20px; + --type-ramp-plus-2-line-height: 28px; + --type-ramp-plus-3-font-size: 22px; + --type-ramp-plus-3-line-height: 30px; + --type-ramp-plus-4-font-size: 28px; + --type-ramp-plus-4-line-height: 38px; + --type-ramp-plus-5-font-size: 36px; + --type-ramp-plus-5-line-height: 46px; + --type-ramp-plus-6-font-size: 40px; + --type-ramp-plus-6-line-height: 52px; + --neutral-color: #808080; + --accent-color: #da1a5f; + --foreground-on-accent-rest: #ffffff; + --foreground-on-accent-hover: #ffffff; + --foreground-on-accent-active: #ffffff; + --foreground-on-accent-focus: #ffffff; + --foreground-on-accent-rest-large: #000000; + --foreground-on-accent-hover-large: #000000; + --foreground-on-accent-active-large: #ffffff; + --foreground-on-accent-focus-large: #000000; + --neutral-layer-card-container: #101010; + --neutral-layer-floating: #292929; + --neutral-layer-1: #181818; + --neutral-layer-2: #101010; + --neutral-layer-3: #000000; + --neutral-layer-4: #000000; + --fill-color: #181818; + --accent-fill-rest: #c01754; + --accent-fill-hover: #da1a5f; + --accent-fill-active: #a01346; + --accent-fill-focus: #c01754; + --accent-foreground-rest: #e1477e; + --accent-foreground-hover: #e55e8e; + --accent-foreground-active: #df3874; + --accent-foreground-focus: #e1477e; + --neutral-fill-rest: #2b2b2b; + --neutral-fill-hover: #333333; + --neutral-fill-active: #262626; + --neutral-fill-focus: #181818; + --neutral-fill-input-rest: #181818; + --neutral-fill-input-hover: #181818; + --neutral-fill-input-active: #181818; + --neutral-fill-input-focus: #181818; + --neutral-fill-stealth-rest: #181818; + --neutral-fill-stealth-hover: #262626; + --neutral-fill-stealth-active: #212121; + --neutral-fill-stealth-focus: #181818; + --neutral-fill-strong-rest: #838383; + --neutral-fill-strong-hover: #979797; + --neutral-fill-strong-active: #767676; + --neutral-fill-strong-focus: #838383; + --neutral-fill-layer-rest: #212121; + --focus-stroke-outer: #717171; + --focus-stroke-inner: #350617; + --neutral-foreground-hint: #838383; + --neutral-foreground-rest: #e5e5e5; + --neutral-stroke-rest: #5a5a5a; + --neutral-stroke-hover: #808080; + --neutral-stroke-active: #424242; + --neutral-stroke-focus: #5a5a5a; + --neutral-stroke-divider-rest: #2e2e2e; + --clear-button-hover: #404040; + --clear-button-active: #3b3b3b; + --tree-item-expand-collapse-hover: #333333; + --tree-item-expand-collapse-selected-hover: #383838; + --base-layer-luminance: 0.09; + --wrapper-gutter: 20px; + --wrapper-max-width: 8px; + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + margin: 0; + padding: 20px; + display: grid; + grid-auto-rows: minmax(0, auto); + grid-template-columns: 1fr; +} + +.section { + box-sizing: border-box; + color: var(--neutral-foreground-rest); + grid-column: span 2; + margin: var(--section-height-spacing-mobile); + padding: 20px 0; + align-items: center; + display: flex; + flex-flow: row wrap; + flex-direction: column; + justify-content: center; + width: 100%; + text-align: center; +} + +.section > svg { + width: 200px; +} + +.section-badge { + --badge-fill-primary: var(--neutral-fill-focus); + --badge-color-primary: var(--accent-foreground-rest); + margin-bottom: calc(var(--base-height-multiplier) * 1px); + box-sizing: border-box; + font-family: var(--body-font); + font-size: var(--type-ramp-minus-1-font-size); + line-height: var(--type-ramp-minus-1-line-height); + display: inline-block; + align-items: center; + flex-direction: column; + box-sizing: border-box; + text-align: center; + color: var(--badge-color-primary); + background-color: var(--badge-fill-primary); + font-weight: 700; + letter-spacing: 0.12em; + padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 4px); + border-radius: calc(var(--control-corner-radius) * 1px); + border: calc(var(--stroke-width) * 1px) solid transparent; +} + +.section-heading { + font-size: var(--type-ramp-plus-5-font-size); + line-height: var(--type-ramp-plus-5-line-height); +} + +.section-paragraph { + font-size: var(--type-ramp-plus-1-font-size); + line-height: var(--type-ramp-plus-1-line-height); +} + +.section-heading, +.section-paragraph { + margin: 0 0 calc(var(--base-height-multiplier) * 2px); +} + +.section-decoration { + border: none; + display: flex; + flex-direction: column; + grid-column: span 2; + height: 58px; + justify-content: space-between; + margin: calc(var(--design-unit) * 5px) calc(50% - 1.5px); +} + +.section-decoration::after, +.section-decoration::before { + background-color: var(--accent-fill-rest); + content: ""; + width: 3px; +} + +.section-decoration::before { + border-radius: 50%; + height: 3px; +} + +.section-decoration:after { + border-radius: calc(var(--corner-radius) * 1px); + height: calc(var(--type-ramp-plus-5-font-size) + var(--design-unit) * 1px); +} + +.theme-code-block { + overflow: auto; + width: inherit; +} + +pre { + text-align: left; +} + +li { + text-align: start; +} + +.section-showcase { + display: flex; +} + +.section-showcase-item-link { + color: white; + text-decoration: none; + text-align: center; + border-radius: 3px; + font-size: var(--type-ramp-base-font-size); + transition: all 0.3s ease-out 0s; +} + +.section-showcase-item svg { + height: 30px; + width: 54px; + fill: white; + stroke: white; + margin: 8px 20px; +} + +[role="banner"] code { + background-color: rgba(0, 0, 0, 0.1); + border: 0.1rem solid rgba(255, 255, 255, 0.1); +} + +@media screen and (min-width: 900px) { + .frontpage { + --type-ramp-base-font-size: 14px; + --type-ramp-base-line-height: 20px; + --type-ramp-minus-1-font-size: 12px; + --type-ramp-minus-1-line-height: 16px; + --type-ramp-minus-2-font-size: 10px; + --type-ramp-minus-2-line-height: 16px; + --type-ramp-plus-1-font-size: 16px; + --type-ramp-plus-1-line-height: 24px; + --type-ramp-plus-2-font-size: 20px; + --type-ramp-plus-2-line-height: 28px; + --type-ramp-plus-3-font-size: 28px; + --type-ramp-plus-3-line-height: 36px; + --type-ramp-plus-4-font-size: 34px; + --type-ramp-plus-4-line-height: 44px; + --type-ramp-plus-5-font-size: 46px; + --type-ramp-plus-5-line-height: 56px; + --type-ramp-plus-6-font-size: 60px; + --type-ramp-plus-6-line-height: 72px; + --wrapper-gutter: 5vw; + --wrapper-max-width: 800px; + grid-template-columns: + minmax(var(--wrapper-gutter), 1fr) minmax(0, var(--wrapper-max-width)) + minmax(var(--wrapper-gutter), 1fr); + } + + .section, + .section-decoration { + grid-column: 2; + } + + .section { + margin: var(--section-height-spacing); + padding: 40px 0; + max-width: 900px; + } + + .section-showcase-item svg { + height: 40px; + width: 80px; + margin: 15px 40px; + } + + .theme-code-block { + width: unset; + } +} diff --git a/sites/website/src/docs/advanced/component-libraries.md b/sites/website/src/docs/advanced/component-libraries.md deleted file mode 100644 index 2a3bf121ca1..00000000000 --- a/sites/website/src/docs/advanced/component-libraries.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -id: component-libraries -title: Component Libraries -sidebar_label: Component Libraries -keywords: - - component libraries ---- - -// TODO \ No newline at end of file diff --git a/sites/website/src/docs/advanced/working-without-decorators.md b/sites/website/src/docs/advanced/working-without-decorators.md new file mode 100644 index 00000000000..527a4077ed0 --- /dev/null +++ b/sites/website/src/docs/advanced/working-without-decorators.md @@ -0,0 +1,90 @@ +--- +id: working-without-decorators +title: Working without Decorators +sidebar_label: Working without Decorators +keywords: + - decorators +--- + +Most of our documented examples include the use of TypeScript decorators. However, as decorators are an unimplemented feature in JavaScript, using them may not be right for your project. See [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/decorators.html) for details on our implementation. + +The static `definition` accepts the same configuration options as the `@attr` decorator. For example, to bind a property name that is different from an attribute name: + +```javascript +import { FASTElement, html, css } from '@microsoft/fast-element'; + +export class MyElement extends FASTElement { + static definition = { + name: 'my-element', + template: html`
${(x) => x.count}
`, + styles: css`div { background: red }`, + attributes: [ + 'count', + ], + }; +} + +FASTElement.define(MyElement); +``` + +```html + +``` + +This accepts the same configuration options as the `@attr` so for example to bind a property name that is different from an attribute name: + +```javascript +import { FASTElement, html, css } from '@microsoft/fast-element'; + +export class MyElement extends FASTElement { + static definition = { + name: 'my-element', + template: html`
${(x) => x.currentCount}
`, + styles: css`div { background: red }`, + attributes: [ + { + attribute: 'current-count', + property: 'currentCount' + }, + ], + }; + + currentCount = 42; +} + +FASTElement.define(MyElement); +``` + +If you need to add a converter to your attribute: + +```javascript +import { FASTElement, html, css } from '@microsoft/fast-element'; + +const converter = { + toView: (value) => { + return value / 2; + }, + fromView: (value) => { + return value / 2; + }, +}; + +export class MyElement extends FASTElement { + static definition = { + name: 'my-element', + template: html`
${(x) => x.currentCount}
`, + styles: css`div { background: red }`, + attributes: [ + { + attribute: 'current-count', + property: 'currentCount', + converter + }, + ], + }; + + currentCount = 42; +} + +FASTElement.define(MyElement); +``` \ No newline at end of file diff --git a/sites/website/src/docs/integrations.md b/sites/website/src/docs/integrations.md index ea63699f5a4..a8ec92becd6 100644 --- a/sites/website/src/docs/integrations.md +++ b/sites/website/src/docs/integrations.md @@ -243,7 +243,7 @@ Here's an example starter `taconfig.json` that you can use: "target": "ES2015", "module": "ES2015", "moduleResolution": "node", - "importHelpers": true, + "importHelpers": true, // when using decorators this allows for the smallest footprint using tslib "experimentalDecorators": true, "declaration": true, "declarationMap": true, diff --git a/sites/website/src/generate-docs.js b/sites/website/src/generate-docs.js index 0c5679b8a50..db512d28b12 100644 --- a/sites/website/src/generate-docs.js +++ b/sites/website/src/generate-docs.js @@ -31,17 +31,15 @@ function findFiles(startPath, filter, paths = []) { return paths; } -const packages = ["fast-element"]; - -function identifyPackage(path) { - for (const pkg of packages) { - if (path.indexOf(pkg) !== -1) { - return pkg; - } +const packages = [ + { + main: "fast-element", + exports: [ + "context", + "di" + ] } - - return ""; -} +]; function updateContentForMdx(content) { content = content.replace("{", "{"); @@ -222,40 +220,32 @@ async function copyArticleMarkdown() { } } -// Copy the api.json files from the web-components packages. +// Copy the api.json files from the packages. async function copyAPI() { for (const pkg of packages) { await safeCopy( path.resolve( - getPackageJsonDir(`@microsoft/${pkg}`), - `./dist/${pkg}.api.json` + getPackageJsonDir(`@microsoft/${pkg.main}`), + `./dist/${pkg.main}.api.json` ), - // require.resolve(`@microsoft/${pkg}/dist/${pkg}.api.json`), - `./src/docs/api/${pkg}.api.json` + `./src/docs/api/${pkg.main}.api.json` ); - } -} -async function buildAPIMarkdown() { - await copyAPI(); - - await new Promise((resolve, reject) => - exec( - "api-documenter markdown -i src/docs/api -o docs/api", - (err, stdout, stderr) => { - console.log(stdout); - console.error(stderr); - if (err) { - return reject(err); - } - - return resolve(); + if (Array.isArray(pkg.exports)) { + for (const pkgExport of pkg.exports) { + await safeCopy( + path.resolve( + getPackageJsonDir(`@microsoft/${pkg.main}`), + `./dist/${pkgExport}/${pkgExport}.api.json` + ), + `./src/docs/api/${pkg.main}/${pkgExport}/${pkgExport}.api.json` + ); } - ) - ); + } + } +} - const dir = "./docs/api"; - const docFiles = await fs.readdir(dir); +async function convertDocFiles(dir, docFiles, package, exportPath) { for (const docFile of docFiles) { try { const { name: id, ext } = path.parse(docFile); @@ -263,8 +253,7 @@ async function buildAPIMarkdown() { continue; } - const pkg = identifyPackage(docFile); - const isAPIHome = id === pkg; + const isAPIHome = !id.includes("."); const docPath = path.join(dir, docFile); const input = fs.createReadStream(docPath); const output = []; @@ -290,6 +279,10 @@ async function buildAPIMarkdown() { } } + if (package && exportPath) { + line = line.replace(package, `${package}/${exportPath}`); + } + const homeLink = line.match(/\[Home\]\(.\/index\.md\) > (.*)/); if (homeLink) { @@ -313,7 +306,7 @@ async function buildAPIMarkdown() { "---", `id: ${id}`, `title: ${title}`, - `hide_title: ${!isAPIHome}`, + `hide_title: ${isAPIHome}`, "---", ]; @@ -324,6 +317,58 @@ async function buildAPIMarkdown() { } } +async function buildAPIMarkdown() { + await copyAPI(); + + await new Promise((resolve, reject) => + exec( + "api-documenter markdown -i src/docs/api -o docs/api", + (err, stdout, stderr) => { + console.log(stdout); + console.error(stderr); + if (err) { + return reject(err); + } + + return resolve(); + } + ) + ); + + for (const pkg of packages) { + for (const pkgExport of pkg.exports) { + await new Promise((resolve, reject) => + exec( + `api-documenter markdown -i src/docs/api/${pkg.main}/${pkgExport} -o docs/api/${pkg.main}/${pkgExport}`, + (err, stdout, stderr) => { + console.log(stdout); + console.error(stderr); + if (err) { + return reject(err); + } + + return resolve(); + } + ) + ); + } + } + + const dir = "./docs/api"; + const docFiles = await fs.readdir(dir); + + convertDocFiles(dir, docFiles); + + for (const pkg of packages) { + for (const pkgExport of pkg.exports) { + const exportDir = `./docs/api/${pkg.main}/${pkgExport}`; + const exportDocFiles = await fs.readdir(exportDir); + + convertDocFiles(exportDir, exportDocFiles, `@microsoft/${pkg.main}`, `${pkgExport}.js`); + } + } +} + async function main() { await Promise.all([copyArticleMarkdown(), buildAPIMarkdown()]); } diff --git a/sites/website/src/pages/index.jsx b/sites/website/src/pages/index.jsx index 171bf87fa44..e2553422c57 100644 --- a/sites/website/src/pages/index.jsx +++ b/sites/website/src/pages/index.jsx @@ -1,134 +1,349 @@ import React from "react"; import Layout from "@theme/Layout"; +import CodeBlock from "@theme-init/CodeBlock"; export default function () { return ( -
-
-

Introduction

+
+
+ + FLEXIBLE, PERFORMANT, & INTUITIVE + + + FAST + + + + + + + + + + + + + -

+

FAST is dedicated to providing support for native Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.

- -
    -
  • - Create reusable UI components with{" "} - @microsoft/fast-element, all based on W3C Web - Component standards. -
    • -
  • - Integrate FAST Web Components with any library, framework, or - build system. You can adopt incrementally without re-writing - your existing systems. -
    • -
- -

- For an in-depth explanation of FAST{" "} +

+ For an in-depth explanation of FAST,{" "} see our docs introduction + .

+
-
+
-

Packages

+
+ HOW TO +

Getting Started

+

Install the package

+ npm install @microsoft/fast-element -

- @microsoft/fast-element -

+

Create a web component

+ + {`/* + * import utilities from @microsoft/fast-element + */ +import { attr, css, FASTElement, html } from "@microsoft/fast-element"; -

- The @microsoft/fast-element library is a lightweight - means to easily build performant, memory-efficient, - standards-compliant Web Components. FAST Elements work in every - major browser and can be used in combination with any front-end - framework or even without a framework. To get up and running with{" "} - @microsoft/fast-element see{" "} - - the Getting Started guide - - . -

- -

- @fluentui/web-components -

- -

- @fluentui/web-components is a library of Web - Components based on the Fluent design language. -

+/* + * Define your component logic + */ +class HelloWorld extends FASTElement { + @attr + name: string; +} -

- The source for @fluentui/web-components is hosted in - [the Fluent UI - monorepo](https://github.com/microsoft/fluentui/tree/master/packages/web-components). -

+/* + * Define your component for the browser and + * include your CSS styles and HTML template + */ +HelloWorld.define({ + name: "hello-world", + template: html\`Hello \${x => x.name}!\`, + styles: css\` + span { + color: red; + } + \`, +});`} + -
+

Add it to your project

+ + {``} + +
-

Getting Started

+
-

- We hope you're excited by the possibilities that FAST presents. - But, you may be wondering where to start. Here are a few - statements that describe various members of our community. We - recommend that you pick the statement you most identify with and - follow the links where they lead. You can always come back and - explore another topic at any time. +

+ FULLY INTEGRATED +

Works with existing frameworks

+

+ Standards-based Web Components are compatible with almost any + modern web framework.

+
- +
-
+
+ BUILT ON FAST +

Showcase

+ +
-

Joining the Community

+
-

+

+ LEARN, MODIFY, AND FOLLOW +

Joining the Community

+

Looking to get answers to questions or engage with us in realtime? Our community is most active{" "} on Discord. Submit @@ -142,22 +357,18 @@ export default function () { .

- -

+

Get started here with the{" "} Contributor Guide .

- -

+

We look forward to building an amazing open source community with you!

-

Contact

-
  • Join the community and chat with us in real-time on{" "} @@ -179,7 +390,7 @@ export default function () { .
-
+
);