Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some more verbiage tweaks in random places #5

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/induction/interactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ page:
---
# Client Side Interactivity

XElement allows you to write your own client-side code either in JavaScript or Typescript. Directly inside your Astro files to enhance the abilities of existing HTML elements.
XElement allows you to write your own client-side code either in JavaScript or Typescript — directly inside your Astro files to enhance the abilities of existing HTML elements.

The code that is written and sent to the client is packaged as independent, async `<script type="modules">` modules which are scoped directly to the element in question.

This non-blocking, asynchronous approach allows the DOM and all of its contents to be loaded first, then the JS is executed immediately afterwards. Each `XElement` is rendered at build time, and the page has perhaps one of the fastest fast time to interactivity as a result of our methods.

Since the payload is scoped to each element, the browser handles the majority of the work on the client-side, without any additional overhead cost of having to render everything out in JavaScript, or send down render files to the client.

This is how XElement gives you the ability to create interactive, web standard, Astro compliant, HTML elements without the use of any external framework or library.
This is how XElement gives you the ability to create interactive, web standards based, and Astro compliant HTML elements without the use of any external framework or library.

Making using XElement to provide client-side interactivity cheaper, more versatile and far easier to implement over other similar implementation methods with Astro supported UI frameworks.
This makes using XElement to provide client-side interactivity cheaper, more versatile and far easier to implement over other similar implementation methods with Astro supported UI frameworks.
12 changes: 6 additions & 6 deletions docs/induction/introduction.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
## What is XElement?


> "XElement allows you to build HTML-first, interactive web components by generating dynamic HTML elements for Astro... all without the addition of any other JavaScript framework, renderer or library involved!"
> "XElement allows you to build HTML-first, interactive web components by generating dynamic HTML elements for Astro...all without the addition of any other JavaScript framework, renderer or library involved!"

It comes with a set of rich features that allow you to develop interactive client side components natively within Astro, and provides the option to customize how and when dynamic interactions are applied to your elements.

Its highly performant, scaleable, simple and straight forward to use.
It's highly performant, scaleable, simple and straight forward to use.

------------------

## Astro & XElement

Currently, to apply any form of client side interactivity in Astro requires the use of an external UI Framework. These interactive components are predominately made from React, Solid, Svelte, Vue etc.
Currently, to apply any form of client side interactivity in Astro requires the use of an external UI Framework. These interactive components are predominately made from React, Solid, Svelte, Vue, etc.

XElement addresses the desire to have client-side interactivity *natively in Astro* to provide dynamic components hydrated on the client. This can provide a substantial performance boost over the conventional methods by not requiring any additional framework rendering.
XElement addresses the desire to have client-side interactivity *natively in Astro* providing dynamic components that can be hydrated on the client. This can provide a substantial performance boost over the conventional methods by not requiring any additional framework rendering.

------------------

Expand All @@ -22,9 +22,9 @@ XElement addresses the desire to have client-side interactivity *natively in Ast
### Interactivity without adding any JavaScript framework
Although dynamic, client-side interactivity can be achieved in Astro already through the addtion of React, Svelte, Vue etc. components, XElement can be used *instead* of a framework component to provide interactivity on your site.

### Combine other JavaScript framework components for increased interativity
### Combine other JavaScript framework components for increased interactivity

Each framework component rendered individually in Astro creates its own, isolated “island of interactivity.” Framework components cannot "talk" to each other: they cannot share or pass data even when they are rendered in the same Astro layout, component or page. Furthermore, its child components must be components of the same framework. (A React component can only have React children components; A Svelte component can only have Svelte children components...)
Each framework component rendered individually in Astro creates its own, isolated “island of interactivity.” Framework components cannot "talk" to each other: they cannot share or pass data even when they are rendered in the same Astro layout, component or page. Furthermore, its child components must be components of the same framework. (A React component can only have React children components; A Svelte component can only have Svelte children components...and so on.)

XElement can unite these separate components by providing a parent container element that can provide and execute dynamic, run-time actions based on data received from any and all child elements, even from multiple frameworks at the same time!

Expand Down
8 changes: 4 additions & 4 deletions docs/induction/methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ page_description: "A collective overview of XElements @Methods. Here you can get

XElement provides you with nine unique methods for interacting with XElement. These are created and implemented to help you apply your client-side interactivity with little effort.

XElements methods are applied using the `@` prefix. This instructs XElement to pick up on the different attributes being passed and apply the XMagic in the background.
XElements methods are applied using the `@` prefix. This instructs XElement to pick up on the different attributes being passed and apply some &ldquo;XMagic&rdquo; in the background.

For each of the methods described on this page we have individual pages for each method. Giving you further insight on how and when to use these powerful features.

Expand Down Expand Up @@ -47,13 +47,13 @@ You can find out more about XElement's `@do` method [here](/docs/api/methods/do)

Each observer is setup and ready for you to provide it a callback function which executes on which ever observation you wish to conduct.

Every observer method also come with the ability to pass through its own options. Providing an extra level of control over the observations that are occurring on the element. These `options` vary between observers and we tell you about them in more details in their respective pages.
Every observer method also comes with the ability to pass through its own options. Providing an extra level of control over the observations that are occurring on the element. These `options` vary between observers and we tell you about them in more details in their respective pages.

-----

## Using Events

A Large part of XElement's product offering is that we help to make applying any event listener on any element that you wish. Well within reason.
A Large part of XElement's product offering is that we help to make applying any event listener on any element that you wish well within reason.

```js
@click | @fullscreenchange | @mouseenter ...
Expand Down Expand Up @@ -95,4 +95,4 @@ XElement's internal non-persistant data store. This is available to every XEleme

------

We strongly encourage you to explore each of the dedicated pages for each of the API's listed above. By being deliberately spares here we have allowed for more space to be available to each method, this way you can have a firm and full understanding over XElement and its methods.
_We strongly encourage you to explore each of the dedicated pages for each of the API's listed above. By being deliberately sparing here we have allowed for more space to be available to each method. This way you can have a firm and full understanding over XElement and its methods._