Merge pull request #161 from retejs/lit-docs

Lit docs

Author: Ni55aN

content/en/docs/1.index.md

@@ -18,7 +18,7 @@ keywords: introduction,ecosystem
 
 In the interactive example above, you can see the notation of the basic elements of the classic editor view and the graph processing using the Dataflow-based engine. This demonstrates the essential capabilities of the framework:
 
-- **Visualization**: you can choose React.js, Vue.js, Angular or Svelte to visualize nodes, sockets, controls, and connections. These visual components can be tailored to your specific needs by creating custom components for each framework, and they can all coexist in a single editor.
+- **Visualization**: you can choose React.js, Vue.js, Angular, Svelte or Lit to visualize nodes, sockets, controls, and connections. These visual components can be tailored to your specific needs by creating custom components for each framework, and they can all coexist in a single editor.
 - **Processing**: the framework offers various types of engines that enable processing diagrams based on their nature, including dataflow and control flow. These types can be combined within the same graph.
 
 :youtube-video{name="intro"}

content/en/docs/19.quality-assurance.md

@@ -33,11 +33,11 @@ The main purpose of this tool is to conduct regression UI testing on different c
 
 Additionally, we test our framework on various versions of commonly used UI frameworks, such as Angular, Svelte, Vue.js, and React.js. This gives us **27** test runs across different environments as we have a matrix of browsers and framework versions
 
-| Browser \ Stack | Angular 16 | Angular 14 | Angular 12 | Svelte 4 | Svelte 3 | Vue.js 3 | Vue.js 2 | React.js 18 | React.js 16 |
-| :-------------: | :--------: | :--------: | :--------: | :------: | :------: | :------: | :------: | :---------: | :---------: |
-|    Chromium     |     ✔      |     ✔      |     ✔      |    ✔     |    ✔     |    ✔     |    ✔     |      ✔      |      ✔      |
-|     Firefox     |     ✔      |     ✔      |     ✔      |    ✔     |    ✔     |    ✔     |    ✔     |      ✔      |      ✔      |
-|     WebKit      |     ✔      |     ✔      |     ✔      |    ✔     |    ✔     |    ✔     |    ✔     |      ✔      |      ✔      |
+| Browser \ Stack | Angular 16 | Angular 14 | Angular 12 | Svelte 4 | Svelte 3 | Vue.js 3 | Vue.js 2 | React.js 18 | React.js 16 | Lit 3 |
+| :-------------: | :--------: | :--------: | :--------: | :------: | :------: | :------: | :------: | :---------: | :---------: | :---------: |
+|    Chromium     |     ✔      |     ✔      |     ✔      |    ✔     |    ✔     |    ✔     |    ✔     |      ✔      |      ✔      |      ✔      |
+|     Firefox     |     ✔      |     ✔      |     ✔      |    ✔     |    ✔     |    ✔     |    ✔     |      ✔      |      ✔      |      ✔      |
+|     WebKit      |     ✔      |     ✔      |     ✔      |    ✔     |    ✔     |    ✔     |    ✔     |      ✔      |      ✔      |      ✔      |
 
 ### Installation {#install}
 

content/en/docs/2.getting-started.md

@@ -12,7 +12,7 @@ keywords: getting started,install,setup,prerequisites,playgrounds,fork,rete kit
 :ref-external{title="Codepen" link="https://codepen.io/Ni55aN/pen/rNZKejd"}
 ::
 
-There are two easy ways to begin working with the framework: forking [the examples](/examples) on Codesandbox or creating a local application using [Rete Kit](/docs/development/rete-kit). The first option allows for experimentation with functionality, which not always covered in the guides. Alternatively, the second option enables the creation of a local application with specific node editor features for a chosen version of **React.js**, **Vue.js**, **Angular** or **Svelte**. Afterward, following the guides will help familiarize yourself with the framework's features and capabilities.
+There are two easy ways to begin working with the framework: forking [the examples](/examples) on Codesandbox or creating a local application using [Rete Kit](/docs/development/rete-kit). The first option allows for experimentation with functionality, which not always covered in the guides. Alternatively, the second option enables the creation of a local application with specific node editor features for a chosen version of **React.js**, **Vue.js**, **Angular**, **Svelte** or **Lit**. Afterward, following the guides will help familiarize yourself with the framework's features and capabilities.
 
 :youtube-video{name="getting-started"}
 
@@ -29,7 +29,7 @@ If TypeScript is your preferred choice, make sure you have TypeScript version 4.
 
 ## Creating an application using devkit {#devkit}
 
-Use [Rete Kit](/docs/development/rete-kit) to quickly set up a Rete.js application. It lets you select a stack (**React.js**, **Vue.js**, **Angular** or **Svelte**) and the set of features.
+Use [Rete Kit](/docs/development/rete-kit) to quickly set up a Rete.js application. It lets you select a stack (**React.js**, **Vue.js**, **Angular**, **Svelte** or **Lit**) and the set of features.
 
 ## Adding Rete.js to your application {#app}
 

content/en/docs/20.development/3.rete-kit.md

@@ -1,6 +1,6 @@
 ---
 description: Simplify your plugin and project development with Rete Kit. Create basic plugin structures instantly and setup an application from a variety of templates to get started quickly
-keywords: development,kit,setup,bootstrap,react.js,vue.js,angular,svelte,vite.js,nuxt,next
+keywords: development,kit,setup,bootstrap,react.js,vue.js,angular,svelte,lit,vite.js,nuxt,next
 ---
 
 # Rete Kit
@@ -12,6 +12,7 @@ keywords: development,kit,setup,bootstrap,react.js,vue.js,angular,svelte,vite.js
 :ref-external{title="React.js" link="https://react.dev/"}
 :ref-external{title="Vite.js" link="https://vitejs.dev/"}
 :ref-external{title="Svelte" link="https://svelte.dev/"}
+:ref-external{title="Lit" link="https://lit.dev/"}
 :ref-external{title="Next.js" link="https://nextjs.org/"}
 :ref-external{title="Nuxt" link="https://nuxt.com/"}
 ::
@@ -47,7 +48,7 @@ rete-kit app --name <name> --stack <stack> --stack-version <version> --features
 ```
 
 where
-- `<stack>` option lets you choose `angular`, `vue`, `vue-vite`, `react`, `react-vite`, `svelte`, `vite`, `next` or `nuxt`
+- `<stack>` option lets you choose `angular`, `vue`, `vue-vite`, `react`, `react-vite`, `svelte`, `lit-vite`, `vite`, `next` or `nuxt`
 - `<features>` is a comma-separated list of the Rete.js editor features
 - `<deps-alias>` is a JSON file that maps dependencies. By default, it installs the latest version from npmjs, but you can specify a different version using the format `name@version` or a path to the tarball
 

content/en/docs/24.FAQ.md

@@ -119,28 +119,28 @@ keywords:
     ```
   ::
   ::qa{question="How to customize nodes?" id="customize-node"}
-    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization) or [Svelte](/docs/guides/renderers/svelte#customization).
+    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization), [Svelte](/docs/guides/renderers/svelte#customization) or [Lit](/docs/guides/renderers/lit#customization).
   ::
   ::qa{question="How to collapse the node (to minimize a node's size by hiding its controls)?" id="collapse-node"}
     Define how elements should be hidden when the node is collapsed by creating a custom node component.
 
-    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization) or [Svelte](/docs/guides/renderers/svelte#customization).
+    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization), [Svelte](/docs/guides/renderers/svelte#customization) or [Lit](/docs/guides/renderers/lit#customization).
   ::
   ::qa{question="What are the steps to implement render plugin for other framework?" id="new-render-plugins"}
     - [Setup a plugin](/docs/development/#create-plugin)
-    - Use the source code of the following packages as a reference: [React.js](https://github.com/retejs/react-plugin), [Vue.js](https://github.com/retejs/vue-plugin), [Angular](https://github.com/retejs/angular-plugin) or [Svelte](https://github.com/retejs/svelte-plugin).
+    - Use the source code of the following packages as a reference: [React.js](https://github.com/retejs/react-plugin), [Vue.js](https://github.com/retejs/vue-plugin), [Angular](https://github.com/retejs/angular-plugin), [Svelte](https://github.com/retejs/svelte-plugin) or [Lit](https://github.com/retejs/lit-plugin)
 
   ::
   ::qa{question="Is there way to prevent nodes from being moved while interacting with controls?" id="prevent-node-movement-on-control"}
     You need to stop propagation of the `pointerdown` event.
 
-    Check the relevant render plugin guide for controls: [React.js](guides/renderers/react#controls), [Vue.js](guides/renderers/vue#controls), [Angular](guides/renderers/angular#controls), [Svelte](guides/renderers/svelte#controls)
+    Check the relevant render plugin guide for controls: [React.js](guides/renderers/react#controls), [Vue.js](guides/renderers/vue#controls), [Angular](guides/renderers/angular#controls), [Svelte](guides/renderers/svelte#controls), [Lit](guides/renderers/lit#controls)
 
   ::
   ::qa{question="Why doesn't the control capture click/pointer events?" id="click-event-doesnt-work-on-control"}
     By default, the area captures these events, so you need to stop the propagation of `pointerdown` event to prevent this
 
-    Check the relevant render plugin guide for controls: [React.js](guides/renderers/react#controls), [Vue.js](guides/renderers/vue#controls), [Angular](guides/renderers/angular#controls), [Svelte](guides/renderers/svelte#controls)
+    Check the relevant render plugin guide for controls: [React.js](guides/renderers/react#controls), [Vue.js](guides/renderers/vue#controls), [Angular](guides/renderers/angular#controls), [Svelte](guides/renderers/svelte#controls), [Lit](guides/renderers/lit#controls)
   ::
   ::qa{question="Is there a way to make the text within a node selectable?" id="user-select"}
     By default, a node is configured with the CSS property `user-select: none` to prevent conflict between text selection and node dragging.
@@ -174,7 +174,7 @@ keywords:
   ::qa{question="How to add a control to the output?" id="add-control-to-output"}
     The process of adding such elements requires the creation of a custom node.
 
-    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization) or [Svelte](/docs/guides/renderers/svelte#customization).
+    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization), [Svelte](/docs/guides/renderers/svelte#customization) or [Lit](/docs/guides/renderers/lit#customization).
   ::
   ::qa{question="How to create an undirected graph with nodes that don't have input/output sockets?" id="undirected-graph"}
     You can use the classic preset with custom nodes and a unified socket for both input and output port.
@@ -200,7 +200,7 @@ keywords:
   ::qa{question="How to change the alignment of inputs/outputs?" id="align-inputs-outputs"}
     The process of changing the node layout requires the creation of a custom node.
 
-    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization) or [Svelte](/docs/guides/renderers/svelte#customization).
+    Check out the relevant customization guide for [React.js](/docs/guides/renderers/react#customization), [Vue.js](/docs/guides/renderers/vue#customization), [Angular](/docs/guides/renderers/angular#customization), [Svelte](/docs/guides/renderers/svelte#customization) or [Lit](/docs/guides/renderers/lit#customization).
   ::
   ::qa{question="Is it possible to render UI using vanilla JS exclusively, without resorting to frameworks?" id="render-vanilla-js"}
     In short, it is possible, but there is no plugin available for this approach since it doesn't offer significant advantages in comparison to the development costs
@@ -274,7 +274,7 @@ keywords:
     ```
   ::
   ::qa{question="What if my app uses different stack and isn't based on React.js, Vue.js, or Angular?" id="different-stack"}
-    In case you're using a framework other than React.js, Vue.js, Angular or Svelte (for which Rete.js provides a rendering plugin), you have the option to utilize the [React.js plugin](/docs/guides/renderers/react) to render nodes and other editor elements.
+    In case you're using a framework other than React.js, Vue.js, Angular, Svelte or Lit (for which Rete.js provides a rendering plugin), you have the option to utilize the [React.js plugin](/docs/guides/renderers/react) to render nodes and other editor elements.
 
     For a quick start, you can create a React.js application using [Rete Kit](/docs/development/rete-kit), copy the code of the editor from `src/rete/default.tsx`, install the relevant dependencies in your project and call `createEditor`, providing the HTMLElement container created by your application.
   ::

content/en/docs/24.api/0.overview.md

@@ -28,7 +28,7 @@ Explore the packages listed below to access their API documentation
 
 ## Integration
 
-:api-overview{filter="rete-react-plugin,rete-vue-plugin,rete-angular-plugin,rete-svelte-plugin"}
+:api-overview{filter="rete-react-plugin,rete-vue-plugin,rete-angular-plugin,rete-svelte-plugin,@retejs/lit-plugin"}
 
 ## Visualization
 

content/en/docs/3.concepts/6.integration.md

@@ -1,18 +1,19 @@
 ---
-description: Learn how to integrate Rete.js with your favorite UI framework, such as Angular, Svelte, Vue.js, or React.js, using the available rendering packages
-keywords: integration,ui,rendering,react.js,vue.js,angular,svelte
+description: Learn how to integrate Rete.js with your favorite UI framework, such as Angular, Svelte, Lit, Vue.js, or React.js, using the available rendering packages
+keywords: integration,ui,rendering,react.js,vue.js,angular,svelte,lit
 ---
 
 # Integration
 
 :diagram{name="integration/architecture" caption="Architecture"}
 
-This framework is not bound to any UI rendering framework and can be integrated with the most popular frameworks/libraries such as **Angular**, **Svelte**, **Vue.js**, **React.js**. The following rendering packages are available:
+This framework is not bound to any UI rendering framework and can be integrated with the most popular frameworks/libraries such as **Angular**, **Svelte**, **Lit**, **Vue.js**, **React.js**. The following rendering packages are available:
 
 - [`rete-react-plugin`](https://www.npmjs.com/package/rete-react-plugin)
 - [`rete-vue-plugin`](https://www.npmjs.com/package/rete-vue-plugin)
 - [`rete-angular-plugin`](https://www.npmjs.com/package/rete-angular-plugin)
 - [`rete-svelte-plugin`](https://www.npmjs.com/package/rete-svelte-plugin)
+- [`@retejs/lit-plugin`](https://www.npmjs.com/package/@retejs/lit-plugin)
 
 The primary objective is to empower you to choose the visualization tools that align with your specific needs. Additionally, if you ever need to use the render plugin for a different framework within your application (such as during a project migration), you can easily do so. Please note that `rete-angular-plugin` is only compatible with Angular applications.
 

content/en/docs/4.guides/1.basic.md

@@ -6,9 +6,9 @@ keywords: basic,area,core
 # Basic editor
 
 ::alert
-This guide features the `rete-react-plugin`. You can use it in any application, regardless of the framework you're using (**React.js**, **Vue.js**, **Angular** or **Svelte**).
+This guide features the `rete-react-plugin`. You can use it in any application, regardless of the framework you're using (**React.js**, **Vue.js**, **Angular**, **Svelte** etc.).
 
-Follow this guide to use the corresponding render plugin in your **Angular**, **Svelte** or **Vue.js** application, with reference to the respective guides for [Angular](/docs/guides/renderers/angular), [Svelte](/docs/guides/renderers/svelte) or [Vue.js](/docs/guides/renderers/vue)
+Follow this guide to use the corresponding render plugin in your **Angular**, **Svelte** or **Vue.js** application, with reference to the respective guides for [Angular](/docs/guides/renderers/angular), [Svelte](/docs/guides/renderers/svelte), [Vue.js](/docs/guides/renderers/vue) etc.
 ::
 
 ::references

content/en/docs/4.guides/10.minimap.md

@@ -52,16 +52,16 @@ But this is not sufficient as the render plugin is responsible for visualization
 
 ## Rendering the minimap {#render}
 
-Currently, the visualization of the minimap is possible using rendering plugins for **React.js**, **Vue.js**, **Angular** and **Svelte**
+Currently, the visualization of the minimap is possible using rendering plugins for **React.js**, **Vue.js**, **Angular**, **Svelte** and **Lit**.
 
 ```ts
-import { Presets } from "rete-react-plugin"; // or  rete-vue-plugin, rete-angular-plugin, rete-svelte-plugin
+import { Presets } from "rete-react-plugin"; // or  rete-vue-plugin, rete-angular-plugin, rete-svelte-plugin, @retejs/lit-plugin
 
 render.addPreset(Presets.minimap.setup({ size: 200 }));
 ```
 
 For a comprehensive guide on how to connect a specific renderer plugin to your stack version, please follow the guide for
-[React.js](/docs/guides/renderers/react), [Vue.js](/docs/guides/renderers/vue), [Angular](/docs/guides/renderers/angular) or [Svelte](/docs/guides/renderers/svelte)
+[React.js](/docs/guides/renderers/react), [Vue.js](/docs/guides/renderers/vue), [Angular](/docs/guides/renderers/angular), [Svelte](/docs/guides/renderers/svelte) or [Lit](/docs/guides/renderers/lit)
 
 The minimap is automatically inserted into your editor and has absolute positioning. If your editor is smaller than the viewport, your editor's container should have `position: relative`.
 

content/en/docs/4.guides/13.reroute.md

@@ -40,10 +40,10 @@ The plugin is connected, but you need also connect a visualization preset to ren
 
 ## Rendering {#rendering}
 
-Currently, the visualization of the reroute pins is possible using rendering plugins for **React.js**, **Vue.js**, **Angular** and **Svelte**
+Currently, the visualization of the reroute pins is possible using rendering plugins for **React.js**, **Vue.js**, **Angular**, **Svelte** and **Lit**.
 
 ```ts
-import { Presets } from "rete-react-plugin"; // or  rete-vue-plugin, rete-angular-plugin, rete-svelte-plugin
+import { Presets } from "rete-react-plugin"; // or  rete-vue-plugin, rete-angular-plugin, rete-svelte-plugin, @retejs/lit-plugin
 
 render.addPreset(Presets.reroute.setup({
   contextMenu(id) {
@@ -56,7 +56,7 @@ render.addPreset(Presets.reroute.setup({
 ```
 
 For a comprehensive guide on how to connect a specific renderer plugin to your stack version, please follow the guide for
-[React.js](/docs/guides/renderers/react), [Vue.js](/docs/guides/renderers/vue), [Angular](/docs/guides/renderers/angular) or [Svelte](/docs/guides/renderers/svelte)
+[React.js](/docs/guides/renderers/react), [Vue.js](/docs/guides/renderers/vue), [Angular](/docs/guides/renderers/angular), [Svelte](/docs/guides/renderers/svelte) or [Lit](/docs/guides/renderers/lit)
 
 ## Selectable Pins {#selectable}