@astrojs/lit - npm Package Compare versions

Comparing version 0.0.0-schema-image-20230401013700 to 0.0.0-vt-partytown-20231212203707

client-shim.js

@@ -20,4 +20,4 @@ async function polyfill() {
 
-if (!polyfillCheckEl || !polyfillCheckEl.shadowRoot) {
+if (!polyfillCheckEl?.shadowRoot) {
 	polyfill();
 }

dist/index.js

@@ -10,3 +10,3 @@ import { readFileSync } from "node:fs";
         "@webcomponents/template-shadowroot/template-shadowroot.js",
-        "lit/experimental-hydrate-support.js"
+        "@lit-labs/ssr-client/lit-element-hydrate-support.js"
       ],
@@ -13,0 +13,0 @@ exclude: ["@astrojs/lit/server.js"]

hydration-support.js

@@ -1,1 +0,2 @@
-import 'lit/experimental-hydrate-support.js';
+// @ts-check
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';

package.json

 {
   "name": "@astrojs/lit",
-  "version": "0.0.0-schema-image-20230401013700",
+  "version": "0.0.0-vt-partytown-20231212203707",
   "description": "Use Lit components within Astro",
@@ -30,20 +30,37 @@ "type": "module",
   },
+  "files": [
+    "dist",
+    "client-shim.js",
+    "client-shim.min.js",
+    "hydration-support.js",
+    "server.js",
+    "server-shim.js"
+  ],
   "dependencies": {
-    "@lit-labs/ssr": "^3.1.0",
-    "@lit-labs/ssr-dom-shim": "^1.1.0",
+    "@lit-labs/ssr": "^3.2.0",
+    "@lit-labs/ssr-client": "^1.1.5",
+    "@lit-labs/ssr-dom-shim": "^1.1.2",
     "parse5": "^7.1.2"
   },
+  "overrides": {
+    "@lit-labs/ssr": {
+      "@lit-labs/ssr-client": "1.1.3"
+    }
+  },
   "devDependencies": {
-    "astro": "0.0.0-schema-image-20230401013700",
+    "chai": "^4.3.7",
+    "cheerio": "1.0.0-rc.12",
+    "lit": "^3.1.0",
+    "mocha": "^10.2.0",
+    "sass": "^1.69.5",
     "astro-scripts": "0.0.14",
-    "chai": "^4.3.6",
-    "cheerio": "^1.0.0-rc.11",
-    "lit": "^2.7.0",
-    "mocha": "^9.2.2",
-    "sass": "^1.52.2"
+    "astro": "0.0.0-vt-partytown-20231212203707"
   },
   "peerDependencies": {
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "lit": "^2.7.0"
+    "lit": "^3.1.0"
   },
+  "publishConfig": {
+    "provenance": true
+  },
   "scripts": {
@@ -50,0 +67,0 @@ "build": "astro-scripts build \"src/**/*.ts\" && tsc",

README.md

@@ -12,2 +12,3 @@ # @astrojs/lit 🔥
 Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
+
 1. (Optionally) Install all necessary dependencies and peer dependencies
@@ -45,12 +46,12 @@ 2. (Also optionally) Update your `astro.config.*` file to apply this integration
 
-__`astro.config.mjs`__
+```diff lang="js" "lit()"
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
++ import lit from '@astrojs/lit';
 
-```js ins={2} "lit()"
-import { defineConfig } from 'astro/config';
-import lit from '@astrojs/lit';
-
-export default defineConfig({
-  // ...
-  integrations: [lit()],
-});
+  export default defineConfig({
+    // ...
+    integrations: [lit()],
+    //             ^^^^^
+  });
 ```
@@ -61,2 +62,3 @@
 To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
+
 - 📦 how framework components are loaded,
@@ -66,13 +68,8 @@ - 💧 client-side hydration options, and
 
-However, there's a key difference with Lit _custom elements_ over conventional _components_: you can use the element tag name directly.
+Writing and importing a Lit component in Astro looks like this:
 
-Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
-
-__`src/components/my-element.js`__
-
 ```js
+// src/components/my-element.js
 import { LitElement, html } from 'lit';
 
-const tagName = 'my-element';
-
 export class MyElement extends LitElement {
@@ -84,14 +81,11 @@ render() {
 
-customElements.define(tagName, MyElement);
+customElements.define('my-element', MyElement);
 ```
 
-> Note that exporting the `tagName` is __required__ if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
+Now, the component is ready to be imported via the Astro frontmatter:
 
-In your Astro template import this component as a side-effect and use the element.
-
-__`src/pages/index.astro`__
-
 ```astro
 ---
-import {MyElement} from '../components/my-element.js';
+// src/pages/index.astro
+import { MyElement } from '../components/my-element.js';
 ---
@@ -102,7 +96,7 @@
 
-> Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this.
+> Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You _might_ run into libraries that work incorrectly because of this.
 
 ### Polyfills & Hydration
 
-The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
+The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about _1.5kB_. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
 
@@ -113,3 +107,3 @@ Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
 ---
-import {MyElement} from '../components/my-element.js';
+import { MyElement } from '../components/my-element.js';
 ---
@@ -134,15 +128,16 @@
 
-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.
+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';
+```diff lang="js"
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
+  import vue from '@astrojs/vue';
+  import lit from '@astrojs/lit';
 
-export default defineConfig({
--  integrations: [vue(), lit()]
-+  integrations: [lit(), vue()]
-});
+  export default defineConfig({
+-   integrations: [vue(), lit()]
++   integrations: [lit(), vue()]
+  });
 ```
@@ -156,4 +151,5 @@
 
-```ini title=".npmrc"
-public-hoist-pattern[]=*lit* 
+```ini
+# .npmrc
+public-hoist-pattern[]=*lit*
 ```
@@ -160,0 +156,0 @@

server.js

@@ -20,6 +20,6 @@ import './server-shim.js';
 	const Ctr = getCustomElementConstructor(Component);
-	return !!(Ctr && Ctr._$litElement$);
+	return !!Ctr?._$litElement$;
 }
 
-async function check(Component, _props, _children) {
+async function check(Component) {
 	// Lit doesn't support getting a tagName from a Constructor at this time.
@@ -63,3 +63,8 @@ // So this must be a string at the moment.
 	yield `>`;
-	const shadowContents = instance.renderShadow({});
+	const shadowContents = instance.renderShadow({
+		elementRenderers: [LitElementRenderer],
+		customElementInstanceStack: [instance],
+		customElementHostStack: [instance],
+		deferHydration: false,
+	});
 	if (shadowContents !== undefined) {
@@ -66,0 +71,0 @@ const { mode = 'open', delegatesFocus } = instance.shadowRootOptions ?? {};

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

22571

decreased by-44.4%

Dependency count

6

increased by20%

Number of package files

12

decreased by-36.84%

Lines of code

338

decreased by-40.91%

Number of lines in readme file

158

decreased by-2.47%

Dependency changes

• + Added@lit-labs/ssr-client@^1.1.5

• - Removed@lit/reactive-element@1.6.3(transitive)

• - Removedlit@2.8.0(transitive)

• - Removedlit-element@3.3.3(transitive)

• - Removedlit-html@2.8.0(transitive)

• Updated@lit-labs/ssr@^3.2.0

• Updated@lit-labs/ssr-dom-shim@^1.1.2