Updates docs.

This commit is contained in:
lelanthran 2025-04-06 10:23:23 +02:00
parent a611eaa81e
commit a874d0a3fe
2 changed files with 46 additions and 13 deletions

View File

@ -79,6 +79,8 @@ doubtful that the testing process will remain dependency-free, but we'll see.
## License
MIT. This means that when it breaks you get to keep *all* the pieces.
[MIT...ish](LICENSE)
This means that when it breaks you get to keep *all* the pieces.
Good luck.

View File

@ -5,6 +5,18 @@ modular, reusable front-end UI components. It allows dynamic loading of
HTML+JS fragments with local script scoping, simple lifecycle hooks, and
isolated DOM composition without needing a full framework.
A single component is simply a fragment of valid HTML that s downloaded and
inserted into the DOM. Scripts in that fragment are scoped to that fragment
alone. An instance of a **ZjsComponent** is created for that fragment which
will have specific functions (identified by the component author) created as
methods on that instance.
To insert a component, which can be a full and rich component containing
complex sub-DOM and methods on the object, do this:
```html
<zjs-component remote-src=somefile.zjsc> </zjs-component>
```
A single component is a fragment of valid HTML that contains:
1. Zero or more HTML elements,
@ -18,7 +30,17 @@ closest **ZjsComponent** ancestor and execute the method on that instance.
At it's minimal usage, **ZjsComponent** can simply be used for client-side
includes of HTML. With full leverage of all it's features, **ZjsComponent**
can be used to create reusable HTML web components in the simplest way
possible.
possible while allowing the component developer to:
1. Scope access to DOM elements to only those in the HTML fragment that is
loaded.
2. Scope access to Javascript to only that **ZjsComponent** instance
represented by the fragment of HTML.
> **NOTE** Not scoping the CSS is a deliberate decision. CSS within the
> fragment *is not scoped*, to allow usage of site-wide and global theming by
> the site author. This dual-cutting sword also means that `<style>` elements
> within a fragment will interfere with the global CSS scopes.
The example below shows how this can be used within plain HTML to let a
`button` element call a method on the containing **ZjsComponent** instance.
@ -55,7 +77,7 @@ All attributes are passed to the fragment script as component attributes.
</zjs-component>
```
> **Note** to ease development, change your editor/IDE settings to treat
> **Note** To ease development, change your editor/IDE settings to treat
> `.zjsc` files exactly the same as it does `.html` files. You definitely want
> this so that your editor/IDE does all the correct syntax highlighting,
> autocompletion and code-formatting for `.zjsc` files that it does for
@ -72,7 +94,7 @@ Each remote fragment may contain:
- The scripts executes in isolation and may export functions to bind to the
component
Example `hello.zjsc`:
Example `hello.zjsc` component:
```html
<div>
@ -92,12 +114,11 @@ Example `hello.zjsc`:
// Normal method; the `this` keyword works here too.
function updateGreeting() {
const el = this.querySelector("[name='name-input']");
this.name = el.innerText;
this.name = el.value;
// No special reason for deferring the call. I just wanted to
// demonstrate that the private methods can be called at any time
// even outside of the stack frame that has the called public
// method.
setTimeout(() => displayGreeting());
// demonstrate that the methods can be called at any time
// even outside of the current stack frame.
setTimeout(() => this.displayGreeting());
}
// Another method, this one won't be exported.
@ -106,14 +127,24 @@ Example `hello.zjsc`:
el.innerText = this.name;
}
// All public methods *must* be exported like this. If they are
// not exported, they are private to this instance and cannot
// be called from outside of this instance.
// All public methods *must* be exported like this. If they are not
// exported, they are private to the current invocation of this script
// element and cannot be called from outside of this current environment.
exports.onConnected = onConnected;
exports.updateGreeting = updateGreeting;
exports.displayGreeting = displayGreeting;
</script>
```
Example usage of above component:
```
<zjs-component remote-src=zjsc/hello.zjsc
greeting=Hello
name=world>
</zjs-component>
```
---
## 🧠 Lifecycle Hooks
@ -124,7 +155,7 @@ The following optional functions can be defined in the fragment script:
- **`onDisconnected()`** called when the component is removed from the DOM
These functions, like all functions defined in the script element within a
.zjsc` page, have `this` bound to the `zjs-component` instance.
`.zjsc` page, have `this` bound to the `zjs-component` instance.
---