diff --git a/src/content/docs/en/guides/integrations-guide/deno.mdx b/src/content/docs/en/guides/integrations-guide/deno.mdx index 37da542c8d99a..ae640672a0455 100644 --- a/src/content/docs/en/guides/integrations-guide/deno.mdx +++ b/src/content/docs/en/guides/integrations-guide/deno.mdx @@ -93,7 +93,7 @@ npm run preview After [performing a build](/en/guides/deploy/#building-your-site-locally) there will be a `dist/server/entry.mjs` module. You can start a server by importing this module in your Deno app: ```js -import './dist/entry.mjs'; +import './dist/server/entry.mjs'; ``` See the `start` option below for how you can have more control over starting the Astro server. @@ -141,7 +141,7 @@ If you disable this, you need to write your own Deno web server. Import and call ```ts import { serve } from 'https://deno.land/std@0.167.0/http/server.ts'; -import { handle } from './dist/entry.mjs'; +import { handle } from './dist/server/entry.mjs'; serve((req: Request) => { // Check the request, maybe do static file handling here. diff --git a/src/content/docs/en/guides/integrations-guide/lit.mdx b/src/content/docs/en/guides/integrations-guide/lit.mdx index 00d2a5e7e710d..6f0a3ea898490 100644 --- a/src/content/docs/en/guides/integrations-guide/lit.mdx +++ b/src/content/docs/en/guides/integrations-guide/lit.mdx @@ -82,35 +82,25 @@ To use your first Lit component in Astro, head to our [UI framework documentatio * 💧 client-side hydration options, and * 🤝 opportunities to mix and nest frameworks together -However, there's a key difference with Lit *custom elements* over conventional *components*: you can use the element tag name directly. - -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: +Writing and importing a Lit component in Astro looks like this: ```js // src/components/my-element.js import { LitElement, html } from 'lit'; -const tagName = 'my-element'; - export class MyElement extends LitElement { render() { return html`
Hello world! From my-element
`; } } -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. - -In your Astro template import this component as a side-effect and use the element. +Now, the component is ready to be imported via the Astro frontmatter: ```astro ---- -// src/pages/index.astro -import { MyElement } from '../components/my-element.js'; ---- - +// src/pages/index.astro import {MyElement} from '../components/my-element.js';