@astrojs/lit - npm Package Compare versions

Comparing version 0.0.2-next.0 to 0.0.2

README.md

CHANGELOG.md

		# @astrojs/lit

		## 0.0.2

		### Patch Changes

		- [#2885](https://github.com/withastro/astro/pull/2885) [`6b004363`](https://github.com/withastro/astro/commit/6b004363f99f27e581d1e2d53a2ebff39d7afb8a) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add README across Astro built-in integrations

		* [#2847](https://github.com/withastro/astro/pull/2847) [`3b621f7a`](https://github.com/withastro/astro/commit/3b621f7a613b45983b090794fa7c015f23ed6140) Thanks [@tony-sull](https://github.com/tony-sull)! - Adds keywords to the official integrations to support discoverability on Astro's Integrations site

		## 0.0.2-next.0
		@@ -4,0 +12,0 @@

package.json

		{
		"name": "@astrojs/lit",
		"version": "0.0.2-next.0",
		"version": "0.0.2",
		"description": "Use Lit components within Astro",
		@@ -32,3 +32,3 @@ "type": "module",
		"devDependencies": {
		"astro": "0.25.0-next.2",
		"astro": "0.25.0",
		"astro-scripts": "0.0.2"
		@@ -42,4 +42,6 @@ },
		"build": "astro-scripts build \"src/*/.ts\" && tsc",
		"build:ci": "astro-scripts build \"src/*/.ts\"",
		"dev": "astro-scripts dev \"src/*/.ts\""
		}
		},
		"readme": "# @astrojs/lit 🔥\n\nThis [Astro integration][astro-integration] enables server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements.\n\n## Installation\n\nThere are two ways to add integrations to your project. Let's try the most convenient option first!\n\n### (experimental) `astro add` command\n\nAstro includes a CLI tool for adding first party integrations: `astro add`. This command will:\n1. (Optionally) Install all necessary dependencies and peer dependencies\n2. (Also optionally) Update your `astro.config.` file to apply this integration\n\nTo install `@astrojs/lit`, run the following from your project directory and follow the prompts:\n\n```sh\n# Using NPM\nnpx astro add lit\n# Using Yarn\nyarn astro add lit\n# Using PNPM\npnpx astro add lit\n```\n\nIf 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.\n\n### Install dependencies manually\n\nFirst, install the `@astrojs/lit` integration like so:\n\n```\nnpm install @astrojs/lit\n```\n\nMost package managers will install associated peer dependencies as well. Still, if you see a \"Cannot find package 'lit'\" (or similar) warning when you start up Astro, you'll need to install `lit` and `@webcomponents/template-shadowroot`:\n\n```sh\nnpm install lit @webcomponents/template-shadowroot\n```\n\nNow, apply this integration to your `astro.config.` file using the `integrations` property:\n\n__astro.config.mjs__\n\n```js\nimport lit from '@astrojs/lit';\n\nexport default {\n // ...\n integrations: [lit()],\n}\n```\n\n## Getting started\n\nTo use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:\n- 📦 how framework components are loaded,\n- 💧 client-side hydration options, and\n- 🪆 opportunities to mix and nest frameworks together\n\nHowever, there's a key difference with Lit _custom elements_ over conventional _components_: you can use the element tag name directly.\n\nAstro 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:\n\n__src/components/my-element.js__\n\n```js\nimport { LitElement, html } from 'lit';\n\nexport const tagName = 'my-element';\n\nclass MyElement extends LitElement {\n render() {\n return html` <p>Hello world! From my-element</p> `;\n }\n}\n\ncustomElements.define(tagName, MyElement);\n```\n\n> 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.\n\nIn your Astro template import this component as a side-effect and use the element.\n\n__src/pages/index.astro__\n\n```astro\n---\nimport '../components/my-element.js';\n---\n\n<my-element></my-element>\n```\n\n> 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.\n\n### Polyfills & Hydration\n\nThe 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).\n\nHydration 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.\n\n```astro\n---\nimport '../components/my-element.js';\n---\n\n<my-element client:visible />\n```\n\nThe above will only load the element's JavaScript when the user has scrolled it into view. Since it is server rendered they will not see any jank; it will load and hydrate transparently.\n\n### More documentation\n\nCheck our [Astro Integration Documentation][astro-integration] for more on integrations.\n\n[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/\n[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components\n"
		}

@astrojs/lit - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics