From 6ae1a1967ca1f62c9bfba78bf2567e789fa23885 Mon Sep 17 00:00:00 2001 From: Gene Date: Thu, 21 Sep 2023 14:53:14 +0200 Subject: [PATCH] Fixed left menu items order. --- docs/feed/rss.xml | 114 +++++++++--------- docs/pages/documentation/about/index.html | 2 +- .../documentation/active_refresh/index.html | 2 +- .../api/helpers/Logger/index.html | 2 +- .../api/helpers/TaskQueue/index.html | 2 +- .../api/helpers/Utils.dom/index.html | 2 +- .../api/helpers/Utils/index.html | 2 +- .../api/helpers/Utils_dom/index.html | 2 +- .../api/helpers/ZxQuery/index.html | 2 +- .../api/helpers/ZxQueryStatic/index.html | 2 +- docs/pages/documentation/api/index.html | 2 +- .../api/localizer/Localizer/index.html | 2 +- .../api/observable/ObjectObserver/index.html | 2 +- .../observable/ObservableListener/index.html | 2 +- .../observable/ObservableObject/index.html | 2 +- .../api/zuix/ActiveRefresh/index.html | 2 +- .../api/zuix/ComponentContext/index.html | 2 +- .../api/zuix/Componentizer/index.html | 2 +- .../api/zuix/ContextController/index.html | 2 +- .../api/zuix/ControllerInstance/index.html | 2 +- .../api/zuix/ViewObserver/index.html | 2 +- .../documentation/api/zuix/Zuix/index.html | 2 +- .../documentation/basic_concepts/index.html | 4 +- docs/pages/documentation/cli/index.html | 2 +- docs/pages/documentation/component/index.html | 4 +- .../documentation/context_options/index.html | 4 +- .../pages/documentation/controller/index.html | 2 +- .../documentation/getting_started/index.html | 4 +- docs/pages/documentation/index.html | 2 +- docs/pages/documentation/view/index.html | 2 +- docs/playground/index.html | 2 +- docs/search-index.json | 2 +- docs/search-list.json | 2 +- docs/search/index.html | 2 +- docs/service-worker.js | 2 +- docs/service-worker.js.map | 2 +- docs/sitemap.xml | 24 ++-- source/pages/documentation/about/index.md | 2 +- .../documentation/basic_concepts/index.md | 2 +- .../documentation/getting_started/index.md | 2 +- 40 files changed, 111 insertions(+), 111 deletions(-) diff --git a/docs/feed/rss.xml b/docs/feed/rss.xml index b0317d4..3056851 100644 --- a/docs/feed/rss.xml +++ b/docs/feed/rss.xml @@ -7,28 +7,19 @@ en - Tue, 05 Sep 2023 14:44:52 +0200 - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 zuix.js https://zuixjs.org/images/icons/icon-152x152.png https://zuixjs.org - - About zuix.js - https://zuixjs.org/pages/documentation/about/ - https://zuixjs.org/pages/documentation/about/ - zuix.js is a lightweight library for creating component based websites and applications by using standard HTML, CSS and JavaScript. - Tue, 05 Sep 2023 14:44:52 +0200 - - - Events and Active&rarr;Refresh https://zuixjs.org/pages/documentation/active_refresh/ https://zuixjs.org/pages/documentation/active_refresh/ About scoped scripts, dependencies, refresh-handlers, built-in @ handlers, custom handlers. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -37,7 +28,7 @@ https://zuixjs.org/pages/documentation/api/helpers/Logger/ https://zuixjs.org/pages/documentation/api/helpers/Logger/ zUIx.js API documentation, Class: Logger - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -46,7 +37,7 @@ https://zuixjs.org/pages/documentation/api/helpers/TaskQueue/ https://zuixjs.org/pages/documentation/api/helpers/TaskQueue/ zUIx.js API documentation, Class: TaskQueue - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -55,7 +46,7 @@ https://zuixjs.org/pages/documentation/api/helpers/Utils.dom/ https://zuixjs.org/pages/documentation/api/helpers/Utils.dom/ zUIx.js API documentation, Namespace: dom - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -64,7 +55,7 @@ https://zuixjs.org/pages/documentation/api/helpers/Utils/ https://zuixjs.org/pages/documentation/api/helpers/Utils/ zUIx.js API documentation, Namespace: Utils - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -73,7 +64,7 @@ https://zuixjs.org/pages/documentation/api/helpers/Utils_dom/ https://zuixjs.org/pages/documentation/api/helpers/Utils_dom/ zUIx.js API documentation, Namespace: dom - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -82,7 +73,7 @@ https://zuixjs.org/pages/documentation/api/helpers/ZxQuery/ https://zuixjs.org/pages/documentation/api/helpers/ZxQuery/ zUIx.js API documentation, Class: ZxQuery - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -91,7 +82,7 @@ https://zuixjs.org/pages/documentation/api/helpers/ZxQueryStatic/ https://zuixjs.org/pages/documentation/api/helpers/ZxQueryStatic/ zUIx.js API documentation, Class: ZxQueryStatic - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -100,7 +91,7 @@ https://zuixjs.org/pages/documentation/api/ https://zuixjs.org/pages/documentation/api/ API classes documentation, Zuix, ComponentContext, ContextController, ZxQuery. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -109,7 +100,7 @@ https://zuixjs.org/pages/documentation/api/localizer/Localizer/ https://zuixjs.org/pages/documentation/api/localizer/Localizer/ zUIx.js API documentation, Class: Localizer - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -118,7 +109,7 @@ https://zuixjs.org/pages/documentation/api/observable/ObjectObserver/ https://zuixjs.org/pages/documentation/api/observable/ObjectObserver/ zUIx.js API documentation, Class: ObjectObserver - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -127,7 +118,7 @@ https://zuixjs.org/pages/documentation/api/observable/ObservableListener/ https://zuixjs.org/pages/documentation/api/observable/ObservableListener/ zUIx.js API documentation, Class: ObservableListener - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -136,7 +127,7 @@ https://zuixjs.org/pages/documentation/api/observable/ObservableObject/ https://zuixjs.org/pages/documentation/api/observable/ObservableObject/ zUIx.js API documentation, Class: ObservableObject - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -145,7 +136,7 @@ https://zuixjs.org/pages/documentation/api/zuix/ActiveRefresh/ https://zuixjs.org/pages/documentation/api/zuix/ActiveRefresh/ zUIx.js API documentation, Class: ActiveRefresh - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -154,7 +145,7 @@ https://zuixjs.org/pages/documentation/api/zuix/ComponentContext/ https://zuixjs.org/pages/documentation/api/zuix/ComponentContext/ zUIx.js API documentation, Class: ComponentContext - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -163,7 +154,7 @@ https://zuixjs.org/pages/documentation/api/zuix/Componentizer/ https://zuixjs.org/pages/documentation/api/zuix/Componentizer/ zUIx.js API documentation, Class: Componentizer - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -172,7 +163,7 @@ https://zuixjs.org/pages/documentation/api/zuix/ContextController/ https://zuixjs.org/pages/documentation/api/zuix/ContextController/ zUIx.js API documentation, Class: ContextController - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -181,7 +172,7 @@ https://zuixjs.org/pages/documentation/api/zuix/ControllerInstance/ https://zuixjs.org/pages/documentation/api/zuix/ControllerInstance/ zUIx.js API documentation, Class: ControllerInstance - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -190,7 +181,7 @@ https://zuixjs.org/pages/documentation/api/zuix/ViewObserver/ https://zuixjs.org/pages/documentation/api/zuix/ViewObserver/ zUIx.js API documentation, Class: ViewObserver - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -199,25 +190,16 @@ https://zuixjs.org/pages/documentation/api/zuix/Zuix/ https://zuixjs.org/pages/documentation/api/zuix/Zuix/ zUIx.js API documentation, Class: Zuix - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 - - Terms and concepts - https://zuixjs.org/pages/documentation/basic_concepts/ - https://zuixjs.org/pages/documentation/basic_concepts/ - Rendering components with a SSG or with SSR, and differences with client-side components loading. About reusability. - Tue, 05 Sep 2023 14:44:52 +0200 - - - CLI / Templates https://zuixjs.org/pages/documentation/cli/ https://zuixjs.org/pages/documentation/cli/ Command Line Interface, creating a new projects, pages, templates and components. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -226,7 +208,7 @@ https://zuixjs.org/pages/documentation/component/ https://zuixjs.org/pages/documentation/component/ Components, custom elements, shadow DOM, standalone components, the <em>default</em> component. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -235,7 +217,7 @@ https://zuixjs.org/pages/documentation/context_options/ https://zuixjs.org/pages/documentation/context_options/ Component's loading options, event handlers, styles, priority, theming. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -244,25 +226,16 @@ https://zuixjs.org/pages/documentation/controller/ https://zuixjs.org/pages/documentation/controller/ Controller implementation types, lifecycle, options, events. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 - - Getting started - https://zuixjs.org/pages/documentation/getting_started/ - https://zuixjs.org/pages/documentation/getting_started/ - Creating a new project using *zuix.js* CLI tool and bare library usage. - Tue, 05 Sep 2023 14:44:52 +0200 - - - Documentation https://zuixjs.org/pages/documentation/ https://zuixjs.org/pages/documentation/ Documentation section - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -271,7 +244,7 @@ https://zuixjs.org/playground/ https://zuixjs.org/playground/ Client-side embeddable components editor. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -280,7 +253,7 @@ https://zuixjs.org/pages/documentation/view/ https://zuixjs.org/pages/documentation/view/ View, Data binding, binding adapters, accessibility, behaviors, events. - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 @@ -289,9 +262,36 @@ https://zuixjs.org/search/ https://zuixjs.org/search/ Search this website - Tue, 05 Sep 2023 14:44:52 +0200 + Thu, 21 Sep 2023 14:52:04 +0200 + + About zuix.js + https://zuixjs.org/pages/documentation/about/ + https://zuixjs.org/pages/documentation/about/ + zuix.js is a lightweight library for creating component based websites and applications by using standard HTML, CSS and JavaScript. + Thu, 21 Sep 2023 14:52:04 +0200 + + + + + Getting started + https://zuixjs.org/pages/documentation/getting_started/ + https://zuixjs.org/pages/documentation/getting_started/ + Creating a new project using *zuix.js* CLI tool and bare library usage. + Thu, 21 Sep 2023 14:52:04 +0200 + + + + + Terms and concepts + https://zuixjs.org/pages/documentation/basic_concepts/ + https://zuixjs.org/pages/documentation/basic_concepts/ + Rendering components with a SSG or with SSR, and differences with client-side components loading. About reusability. + Thu, 21 Sep 2023 14:52:04 +0200 + + + diff --git a/docs/pages/documentation/about/index.html b/docs/pages/documentation/about/index.html index e3706a8..0a8491b 100644 --- a/docs/pages/documentation/about/index.html +++ b/docs/pages/documentation/about/index.html @@ -502,7 +502,7 @@ -->

Terms and concepts

This is a brief introduction to some terms and concepts commonly used in web development and related to zuix.js functionality. For a better understanding of these pages a basic knowledge of HTML, CSS and JavaScript is required.

Component

We can think of a component as a reusable part of the page that can be defined once and then added to any page, one or more times, by just referencing it.

In a component there are two kind of reusable parts:

  • a visible part (view), which is a block of HTML and CSS code that is rendered in the page
  • a program-logic part (controller), which is a block of JavaScript code used to control and animate the associated view

A complete component is therefore formed by the combo view + controller, although as described later in these pages, we can also have view-only components that do not contain any JavaScript code, or controller-only components that are associated to a generic element of the page instead of a specific view template.

Component implementation

A component can be implemented with various methods:

  • using a distinct file for each reusable part (.html, .css, .js)
  • using a single .js file which will also generate the output of the HTML and CSS code for the view
  • declaring all parts inline, on the HTML page itself

The first method, among other advantages, maximizes the maintainability, reusability, and customizability of each part. This design pattern, that reckons on loading all bits of a component from external files, is not directly supported by the web platform, and in order to be implemented it requires a resource loader such as zuix.js.

View rendering

"Rendering" is the process of outputting the view of a component instance into the page. This process can be implemented using one of the following methods:

  • Client-side
    the view is dynamically added using JavaScript
  • Server-side
    the view is pre-rendered on the server before the requested page is sent to the client
  • Build-side
    the view is pre-rendered during the build process of the page, using a static-site generator or similar tool

The first method is the standard approach in zuix.js, but it also allows to pre-render a component's view either server-side or during the build process, by simply outputting the component's HTML inside a container element with some special directive attributes (ctrl z-load), so that zuix.js will then instantiate the controller of the component and bind it to the pre-rendered view instance.

Web Components

The term Web Components identifies a set of Web Platform APIs that allow to create custom HTML elements.
The main advantage in using custom elements is encapsulation ‐ "being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean." (MDN)
zuix.js also implements emulated encapsulation through which is possible to load the same component either using a custom element or by using any standard element as host.

GitHub logo
JavaScript library for component-based websites and applications.

Terms and concepts

This is a brief introduction to some terms and concepts commonly used in web development and related to zuix.js functionality. For a better understanding of these pages a basic knowledge of HTML, CSS and JavaScript is required.

Component

We can think of a component as a reusable part of the page that can be defined once and then added to any page, one or more times, by just referencing it.

In a component there are two kind of reusable parts:

  • a visible part (view), which is a block of HTML and CSS code that is rendered in the page
  • a program-logic part (controller), which is a block of JavaScript code used to control and animate the associated view

A complete component is therefore formed by the combo view + controller, although as described later in these pages, we can also have view-only components that do not contain any JavaScript code, or controller-only components that are associated to a generic element of the page instead of a specific view template.

Component implementation

A component can be implemented with various methods:

  • using a distinct file for each reusable part (.html, .css, .js)
  • using a single .js file which will also generate the output of the HTML and CSS code for the view
  • declaring all parts inline, on the HTML page itself

The first method, among other advantages, maximizes the maintainability, reusability, and customizability of each part. This design pattern, that reckons on loading all bits of a component from external files, is not directly supported by the web platform, and in order to be implemented it requires a resource loader such as zuix.js.

View rendering

"Rendering" is the process of outputting the view of a component instance into the page. This process can be implemented using one of the following methods:

  • Client-side
    the view is dynamically added using JavaScript
  • Server-side
    the view is pre-rendered on the server before the requested page is sent to the client
  • Build-side
    the view is pre-rendered during the build process of the page, using a static-site generator or similar tool

The first method is the standard approach in zuix.js, but it also allows to pre-render a component's view either server-side or during the build process, by simply outputting the component's HTML inside a container element with some special directive attributes (ctrl z-load), so that zuix.js will then instantiate the controller of the component and bind it to the pre-rendered view instance.

Web Components

The term Web Components identifies a set of Web Platform APIs that allow to create custom HTML elements.
The main advantage in using custom elements is encapsulation ‐ "being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean." (MDN)
zuix.js also implements emulated encapsulation through which is possible to load the same component either using a custom element or by using any standard element as host.

GitHub logo
JavaScript library for component-based websites and applications.
GitHub logo
JavaScript library for component-based websites and applications.
GitHub logo
JavaScript library for component-based websites and applications.

Getting started

See zuix.js in action using the online playground, where is possible to create and download ready to use components directly in the browser!

sports_soccer Playground

Bare library usage on an existing site

JsDeliver

As a regular script:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.29"></script>

As a module:

<script type="module" src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.29/js/zuix.module.min.js"></script>

As a dependency of another module:

// file: my-class.module.js
 import 'https://cdn.jsdelivr.net/npm/zuix-dist@1.1.29/js/zuix.module.min.js';

NPM

npm install zuix-dist

then copy the library from node_modules/zuix-dist/js to your project's js folder and include it in your HTML page or JavaScript module.

Creating a new web project using the CLI

The zuix-cli tool can be used to create a new web project, the only prerequisite is that node.js must be installed first.

# Create a new website project named 'my-new-webapp'
 npx zuix new my-new-webapp

A new folder named my-new-webapp will be created containing all files required to run the starter project.

From the new folder we can now start the local server that will watch, build and serve the web application files (by default at http://localhost:8080).

cd my-new-webapp
-npx zuix start

Read more about all other zuix command functionality from zuix-cli documentation page.

GitHub logo
JavaScript library for component-based websites and applications.
GitHub logo
JavaScript library for component-based websites and applications.