From e63a11dd1579ba9c55dce334c12ad0cfe9b5f351 Mon Sep 17 00:00:00 2001 From: Rob Levin Date: Mon, 18 Apr 2022 17:28:53 -0500 Subject: [PATCH 1/3] Rob's take on editorial for the getting started page. --- docs/induction/getting-started.md | 48 +++++++++++++++---------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/induction/getting-started.md b/docs/induction/getting-started.md index 9bf9651..f189439 100644 --- a/docs/induction/getting-started.md +++ b/docs/induction/getting-started.md @@ -2,23 +2,23 @@ There is no better way to learn how to swim than jumping in both feet into the deep-end. -With XElement you will find that the deep-end is quiet shallow, and the waters are warm. +With XElement you will find that the “deep-end” is quiet shallow and the waters are warm. -To introduce you to XElement, how to write your components and how to utilize the methods that we provide. We will be making two very simple components. +To gently introduce you to XElement we will be making two very simple components. In building these two components, you will learn to utilize the methods that XElement provides to make your life easier. -The first being our maiden `` component and the second being the defacto `` component. +The first of these being our maiden `` component, and the second being the defacto `` component. ## `` Without further ado let's create your first `XElement` component! -We will create a [*explicitly named XElement*](polymorphism#explicitly-declared-custom-elements) using the following syntax: +We will create an [*explicitly named XElement*](polymorphism#explicitly-declared-custom-elements) using the following syntax: ```jsx const { HTMLElement : MyComponentName } = XElement ``` -or you can use the [implicit](polymorphism#) variety in your projects following a similar manner as above, but we let XElement assign the correct `HTMLElement` +Alternatively, you can use the [implicit](polymorphism#) variety in your projects. This approach follows a similar manner as shown above, but we let XElement assign the correct `HTMLElement` for us: ```jsx const { HTMLElement || ComponentName } = XElement @@ -42,11 +42,11 @@ This renders as `

!! Hello World !!

` From here we can make this element do any number of things... -Using **JavaScript** or **TypeScript** we can make this dynamic when certain certain events are triggered or conditions are met. +Using **JavaScript** or **TypeScript** we can make this dynamic when certain events are triggered or conditions are met. An XElement can perform actions if it has been *clicked* on or if it is *visible* or if it has been *resized.* It can even `fetch` data and dynamically `import` files inside the element itself! -What you can do with this little `` component is entirely up to your imagination. +What you can do with this little `` component is only limited by your imagination. Let's make our `` component fade in, using the **Web Animation API**. @@ -89,9 +89,9 @@ Now, you should see the text 'Hello-World' fade nicely in to view. How could we not provide an example of a 'Counter'? -You will notice that Astro starter "framework" examples (e.g. React, Svelte etc.) contain a counter component to show you how framework components work in Astro. +You will notice that Astro starter "framework" examples (e.g. React, Svelte etc.) contain a counter component to show you how various framework components work in Astro. -With XElement, you can have a fully-functioning, interactive *Astro* counter component, no other framework required! +With XElement, you can have a fully-functioning, interactive *Astro* counter component — no other framework required! ### Let Start @@ -105,20 +105,20 @@ We can define all of these elements from XElement at once: ```astro --- import XElement from 'astro-`xelement`' -const {..., button:Button, span:Display, Counter} = XElement +const {button:Button, span:Display, Counter} = XElement --- ``` Here we are defining three different types HTML elements to create four distinct HTML elements. (Remember, we're making two buttons. So they are distinct elements in the document, but they are the same type of element!) -Two types of these *Named Elements* are familiar HTML Elements: ` - 0 + 0 - + ``` ### `@` decorators To start enhancing our component, we use one of the many `@` decorators recognized by `XElement` to specify what type of action we wish it to perform. @@ -157,20 +159,22 @@ XElement also provides a `store` that serves as a special non-persistent data ob Giving an `id` to an XElement — as we have done with `` — allows us to target that element from elsewhere in the component tree. In this example, we can update the counter's displayed count by referencing our `store`, and using it to change the `` element's `textContent`. ### Summary -In this example, what we are asking our parent element (the ``) to **do** is initialise the `store` with a `count` of `0`. +In this example, what we are asking our parent element (the ``) to **do** is initialise the `store` with a `count` of `0`. Then, we're telling the buttons that when they receive a `click` event, they should increment or decrement the `store.count` respectively; and update the `display.textContent` accordingly. -This `` example renders the following HTML to the page: +This `` example renders the following HTML to the page: ```html - + 0 - + ``` +_Note: that capitalized `HCounter` gets converted to hyphenated `h-counter` which is essentially a valid custom element._ + ## Next Steps: ### API reference From f0973ea2d4330484c9d59f50f36190de6afb5069 Mon Sep 17 00:00:00 2001 From: Rob Levin Date: Mon, 18 Apr 2022 17:55:42 -0500 Subject: [PATCH 3/3] One more typo --- docs/induction/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/induction/getting-started.md b/docs/induction/getting-started.md index 3fd9e12..acb87e2 100644 --- a/docs/induction/getting-started.md +++ b/docs/induction/getting-started.md @@ -96,7 +96,7 @@ You will notice that Astro starter "framework" examples (e.g. React, Svelte etc. With XElement, you can have a fully-functioning, interactive *Astro* counter component — no other framework required! -### Let Start +### Let's Start Let's create our own interactive `` component (`` will be converted to `` under-the-hood making your custom element a valid, well, [custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#high-level_view). Note that this time, we will need to declare a few different XElements, one to represent each HTML element we wish to create.