@astrojs/lit
Advanced tools
Comparing version 1.0.1 to 1.0.2-beta.0
# @astrojs/lit | ||
## 1.0.2-beta.0 | ||
### Patch Changes | ||
- [#5782](https://github.com/withastro/astro/pull/5782) [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Only shim fetch if not already present | ||
- [#5791](https://github.com/withastro/astro/pull/5791) [`f7aa1ec25`](https://github.com/withastro/astro/commit/f7aa1ec25d1584f7abd421903fbef66b1c050e2a) Thanks [@ba55ie](https://github.com/ba55ie)! - Fix Lit slotted content | ||
## 1.0.1 | ||
@@ -51,3 +59,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 +62,0 @@ ## 0.1.4 |
{ | ||
"name": "@astrojs/lit", | ||
"version": "1.0.1", | ||
"version": "1.0.2-beta.0", | ||
"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": "2.0.0-beta.2", | ||
"astro-scripts": "0.0.10-beta.0", | ||
"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 { installWindowOnGlobal } from '@lit-labs/ssr/lib/dom-shim.js'; | ||
installWindowOnGlobal(); | ||
if (typeof fetch === 'function') { | ||
const _fetch = fetch; | ||
installWindowOnGlobal(); | ||
globalThis.fetch = window.fetch = _fetch; | ||
} else { | ||
installWindowOnGlobal(); | ||
} | ||
window.global = window; | ||
@@ -5,0 +12,0 @@ document.getElementsByTagName = () => []; |
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
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
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
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
29165
416
153
4
7
1
2
+ Addedparse5@^7.1.2