Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@astrojs/lit
Advanced tools
@astrojs/lit - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| # @astrojs/lit | ||
| ## 1.0.2 | ||
| ### Patch Changes | ||
| - [#5776](https://github.com/withastro/astro/pull/5776) [`6a31433ed`](https://github.com/withastro/astro/commit/6a31433ed79c7f84fd3ce602005b42ad95007d84) Thanks [@ba55ie](https://github.com/ba55ie)! - Fix Lit slotted content | ||
| ## 1.0.1 | ||
@@ -51,3 +57,3 @@ | ||
| - [#3511](https://github.com/withastro/astro/pull/3511) [`2fedb974`](https://github.com/withastro/astro/commit/2fedb974899b37a8d9ddabc476764a6d35d1e446) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Patch Lit's server shim to allow for `sass` compatability | ||
| - [#3511](https://github.com/withastro/astro/pull/3511) [`2fedb974`](https://github.com/withastro/astro/commit/2fedb974899b37a8d9ddabc476764a6d35d1e446) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Patch Lit's server shim to allow for `sass` compatibility | ||
@@ -54,0 +60,0 @@ ## 0.1.4 |
| { | ||
| "name": "@astrojs/lit", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Use Lit components within Astro", | ||
@@ -30,8 +30,12 @@ "type": "module", | ||
| "dependencies": { | ||
| "@lit-labs/ssr": "^2.2.0" | ||
| "@lit-labs/ssr": "^2.2.0", | ||
| "parse5": "^7.1.2" | ||
| }, | ||
| "devDependencies": { | ||
| "astro": "1.1.2", | ||
| "astro-scripts": "0.0.7", | ||
| "astro": "1.9.2", | ||
| "astro-scripts": "0.0.9", | ||
| "chai": "^4.3.6", | ||
| "cheerio": "^1.0.0-rc.11", | ||
| "lit": "^2.2.5", | ||
| "mocha": "^9.2.2", | ||
| "sass": "^1.52.2" | ||
@@ -38,0 +42,0 @@ }, |
@@ -19,3 +19,3 @@ # @astrojs/lit 🔥 | ||
| # Using NPM | ||
| npm run astro add lit | ||
| npx astro add lit | ||
| # Using Yarn | ||
@@ -27,3 +27,3 @@ yarn astro add lit | ||
| If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below. | ||
| If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below. | ||
@@ -62,3 +62,3 @@ ### Install dependencies manually | ||
| - 💧 client-side hydration options, and | ||
| - 🪆 opportunities to mix and nest frameworks together | ||
| - 🤝 opportunities to mix and nest frameworks together | ||
@@ -117,7 +117,40 @@ However, there's a key difference with Lit _custom elements_ over conventional _components_: you can use the element tag name directly. | ||
| ### More documentation | ||
| ## Troubleshooting | ||
| Check our [Astro Integration Documentation][astro-integration] for more on integrations. | ||
| For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help! | ||
| You can also check our [Astro Integration Documentation][astro-integration] for more on integrations. | ||
| Common issues are listed below: | ||
| ### Browser globals | ||
| The Lit integration's SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes `window`, `document`, and `location`. | ||
| These globals *can* interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries. | ||
| Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations: | ||
| ```diff | ||
| import { defineConfig } from 'astro/config'; | ||
| import vue from '@astrojs/vue'; | ||
| import lit from '@astrojs/lit'; | ||
| export default defineConfig({ | ||
| - integrations: [vue(), lit()] | ||
| + integrations: [lit(), vue()] | ||
| }); | ||
| ``` | ||
| The correct order might be different depending on the underlying cause of the problem. This is not guaranteed to fix every issue however, and some libraries cannot be used if you are using the Lit integration because of this. | ||
| ### Limitations | ||
| The Lit integration is powered by `@lit-labs/ssr` which has some limitations. See their [limitations documentation](https://www.npmjs.com/package/@lit-labs/ssr#user-content-notes-and-limitations) to learn more. | ||
| ## Contributing | ||
| This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! | ||
| [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ | ||
| [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components |
| import './server-shim.js'; | ||
| import '@lit-labs/ssr/lib/render-lit-html.js'; | ||
| import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js'; | ||
| import * as parse5 from 'parse5'; | ||
@@ -61,8 +62,18 @@ function isCustomElementTag(name) { | ||
| if (slots) { | ||
| for (const [slot, value] of Object.entries(slots)) { | ||
| if (slot === 'default') { | ||
| yield `<astro-slot>${value || ''}</astro-slot>`; | ||
| } else { | ||
| yield `<astro-slot slot="${slot}">${value || ''}</astro-slot>`; | ||
| for (let [slot, value = ''] of Object.entries(slots)) { | ||
| if (slot !== 'default' && value) { | ||
| // Parse the value as a concatenated string | ||
| const fragment = parse5.parseFragment(`${value}`); | ||
| // Add the missing slot attribute to child Element nodes | ||
| for (const node of fragment.childNodes) { | ||
| if (node.tagName && !node.attrs.some(({ name }) => name === 'slot')) { | ||
| node.attrs.push({ name: 'slot', value: slot }); | ||
| } | ||
| } | ||
| value = parse5.serialize(fragment); | ||
| } | ||
| yield value; | ||
| } | ||
@@ -69,0 +80,0 @@ } |
@@ -36,3 +36,3 @@ import { expect } from 'chai'; | ||
| it('should render emtpy component with default markup', async () => { | ||
| it('should render empty component with default markup', async () => { | ||
| const tagName = 'nothing-component'; | ||
@@ -39,0 +39,0 @@ customElements.define(tagName, class extends LitElement {}); |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.58%
28738
- Lines of code
- increased by1.99%
410
- Number of lines in readme file
- increased by27.5%
153
Worsened metrics
- Dependency count
- increased by33.33%
4
- Dev dependency count
- increased by75%
7
Dependency changes
+ Addedparse5@^7.1.2