From 23e9a4153984847888269b37f79bc0cad764b269 Mon Sep 17 00:00:00 2001 From: Frederik Wessberg Date: Thu, 5 May 2022 16:19:03 +0200 Subject: [PATCH] feat: add the 'lit' option that can be passed to the shadow-dom feature or any of its aliases such as web-components to include its polyfill support layer --- README.md | 5 +- package-lock.json | 75 +++++++++++++++++++ package.json | 1 + src/constant/constant.ts | 3 + .../polyfill-builder-service.ts | 17 ++++- test/api/api.test.ts | 8 +- 6 files changed, 100 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 4d96ea7..4f0d62d 100644 --- a/README.md +++ b/README.md @@ -294,7 +294,10 @@ For example: `systemjs|variant=s` selects the _s_ variant, while `systemjs|varia #### Extra options for `shadow-dom` -You can pass the `experimental` option to `shadow-dom` (or any of its aliases such as `web-components`) to base it on some experimental features that may reduce bugs in older browsers such as IE and Edge <= 15. +| Option | Description | +| ---------------- | -------------------------------------------------------------------------------------------------- | +| `experimental` | You can pass the `experimental` option to `shadow-dom` (or any of its aliases such as `web-components`) to base it on some experimental features that may reduce bugs in older browsers such as IE and Edge <= 15. | +| `lit` | If you're going to be using [Lit](https://lit.dev/), you can also pass the `lit` option to `shadow-dom` (or any of its aliases such as `web-components`) to include its [polyfill support layer](https://lit.dev/docs/releases/upgrade/#load-polyfill-support-when-using-web-components-polyfills). | ### Usage in a Web Worker/Service Worker diff --git a/package-lock.json b/package-lock.json index 56b9445..c361200 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,7 @@ "focus-visible": "5.2.0", "http-status-codes": "2.1.4", "intersection-observer": "0.12.0", + "lit": "2.2.3", "mime": "2.5.2", "morgan": "1.10.0", "mutationobserver-shim": "0.3.7", @@ -1895,6 +1896,11 @@ "node": ">=6.9.0" } }, + "node_modules/@lit/reactive-element": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz", + "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==" + }, "node_modules/@mdn/browser-compat-data": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-4.0.5.tgz", @@ -2868,6 +2874,11 @@ "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==", "dev": true }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, "node_modules/@types/ua-parser-js": { "version": "0.7.36", "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz", @@ -9900,6 +9911,33 @@ "node": ">=6" } }, + "node_modules/lit": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.3.tgz", + "integrity": "sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.3.tgz", + "integrity": "sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/load-json-file": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz", @@ -17242,6 +17280,11 @@ "integrity": "sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==", "dev": true }, + "@lit/reactive-element": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz", + "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA==" + }, "@mdn/browser-compat-data": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-4.0.5.tgz", @@ -18017,6 +18060,11 @@ } } }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, "@types/ua-parser-js": { "version": "0.7.36", "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz", @@ -23278,6 +23326,33 @@ } } }, + "lit": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.3.tgz", + "integrity": "sha512-5/v+r9dH3Pw/o0rhp/qYk3ERvOUclNF31bWb0FiW6MPgwdQIr+/KCt/p3zcd8aPl8lIGnxdGrVcZA+gWS6oFOQ==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "lit-element": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.3.tgz", + "integrity": "sha512-vI4j3eWwtQaR8q/O63juZVliBIFMio716X719/lSsGH4UWPy2/7Qf377jsNs4cx3gCHgIbx8yxFgXFQ/igZyXQ==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, "load-json-file": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-5.3.0.tgz", diff --git a/package.json b/package.json index d11b94e..74c26a5 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "@wessberg/di": "2.0.3", "@wessberg/pointer-events": "1.0.9", "@wessberg/stringutil": "1.0.19", + "lit": "2.2.3", "Base64": "1.1.0", "blob-polyfill": "5.0.20210201", "browserslist": "4.17.1", diff --git a/src/constant/constant.ts b/src/constant/constant.ts index 299846f..ad76763 100644 --- a/src/constant/constant.ts +++ b/src/constant/constant.ts @@ -3051,6 +3051,9 @@ export const constant: IConstant = { "node_modules/@webcomponents/shadydom/src/shadydom.js", "polyfill-lib/@webcomponents/shadycss-experimental/entrypoints/scoping-shim.js", "polyfill-lib/@webcomponents/shadycss-experimental/entrypoints/custom-style-interface.js" + ], + lit: [ + "node_modules/lit/polyfill-support.js", ] }, features: ["shadowdomv1"], diff --git a/src/service/polyfill-builder/polyfill-builder-service.ts b/src/service/polyfill-builder/polyfill-builder-service.ts index 89bee74..ede30a3 100644 --- a/src/service/polyfill-builder/polyfill-builder-service.ts +++ b/src/service/polyfill-builder/polyfill-builder-service.ts @@ -75,10 +75,7 @@ export class PolyfillBuilderService implements IPolyfillBuilderService { throw new ReferenceError(`Unresolved path: '${metaVariantPathInput}'`); } } - } - - // If shadow-dom is requested, the variant to use may be provided as metadata. If so, we should use that one, rather than the relativePaths - else if ( + } else if ( polyfillFeature.name === "shadow-dom" && meta != null && polyfillFeature.meta != null && @@ -110,6 +107,18 @@ export class PolyfillBuilderService implements IPolyfillBuilderService { } } + if (meta != null && polyfillFeature.name === "shadow-dom" && polyfillFeature.meta?.lit === true) { + for (const filePath of selectMetaPaths(meta.lit, request.context)) { + const filePathInput = join(rootDirectory, filePath); + const resolvedFilePath = sync(filePathInput, SYNC_OPTIONS); + if (resolvedFilePath != null) { + absolutePaths.push(resolvedFilePath); + } else { + throw new ReferenceError(`Unresolved path: '${filePathInput}'`); + } + } + } + if (meta != null && polyfillFeature.name === "zone") { // If Zone is requested, 'zone-error' may be requested which improves the produced Stack trace when using Zone if (polyfillFeature.meta != null && polyfillFeature.meta.error === true) { diff --git a/test/api/api.test.ts b/test/api/api.test.ts index d39fb98..3c77c9b 100644 --- a/test/api/api.test.ts +++ b/test/api/api.test.ts @@ -272,11 +272,11 @@ test("Accepts OPTIONS requests. #1", async t => { }); test("Will correctly parse meta information for 'shadow-dom'. #1", async t => { - const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=shadow-dom|experimental", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70)); - t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true)); + const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=shadow-dom|experimental|lit", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70)); + t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true && meta.lit === true)); }); test("Will correctly parse meta information for 'shadow-dom' when using the alias 'web-components'. #1", async t => { - const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=web-components|experimental", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70)); - t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true)); + const polyfillRequest = getPolyfillRequestFromUrl(new URL("?features=web-components|experimental|lit", `https://my-polyfill-service.app${constant.endpoint.polyfill}`), chrome(70)); + t.true([...polyfillRequest.features].some(({meta, name}) => name === "shadow-dom" && meta != null && meta.experimental === true && meta.lit === true)); });