many optimizations in the project / composer added

README.md

@@ -26,15 +26,15 @@ Include AvalynxRef:
 
 Replace `path/to/avalynx-ref.js` with the actual path to the file in your project.
 
-## Installation via jsDelivr
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-ref/))
 
 AvalynxRef is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/avalynx-ref/dist/avalynx-ref.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/avalynx-ref@0.0.2/dist/js/avalynx-ref.min.js"></script>
 ```
 
-## Installation via NPM
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-ref))
 
 AvalynxRef is also available as a npm package. You can add it to your project with the following command:
 
@@ -60,6 +60,20 @@ After installing, you can import AvalynxRef into your JavaScript file like this:
 import { AvalynxRef } from 'avalynx-ref';
 ```
 
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-ref))
+
+AvalynxRef is also available as a Composer package. You can add it to your project with the following command:
+
+```bash
+composer require avalynx/avalynx-loader
+```
+
+After installing, you can import AvalynxLoader into your HTML file like this:
+
+```html
+<script src="vendor/avalynx/avalynx-loader/dist/js/avalynx-loader.js"></script>
+``` 
+
 ## Usage
 
 To use AvalynxRef in your project, include the AvalynxRef JavaScript file in your project and initialize the class with the appropriate selector.
@@ -80,10 +94,13 @@ myRef.value = "<p>Updated content</p>";
 
 AvalynxRef allows the following options for customization:
 
-- `selector`: (string) The selector to use for targeting tables within the DOM (default: `.avalynx-ref`).
+- `selector`: (string) The selector to use for targeting tables within the DOM (default: `'.avalynx-ref'`).
 - `options`: An object containing the following keys:
-  - `isHtml`: (bool) Treat the value as HTML (default: `false`).
+  - `isHtml`: (boolean) Treat the value as HTML (default: `false`).
 
+## Planned Features
+- callback function for value change
+
 ## Contributing
 
 Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:

composer.json

@@ -0,0 +1,24 @@
+{
+    "name": "avalynx/avalynx-ref",
+    "description": "AvalynxRef is a Ref implementation for updating elements with a value like React's Ref or Vue's Ref.",
+    "keywords": [
+        "avalynx",
+        "ref",
+        "vue",
+        "react"
+    ],
+    "homepage": "https://github.com/avalynx/avalynx-ref",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Juergen Schwind an the AvalynxRef authors",
+            "homepage": "https://github.com/avalynx/avalynx-ref/graphs/contributors"
+        }
+    ],
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/avalynx/avalynx-ref.git"
+        }
+    ]
+}

dist/js/avalynx-ref.esm.js

@@ -10,9 +10,10 @@
  * @repository https://github.com/avalynx/avalynx-ref.git
  * @bugs https://github.com/avalynx/avalynx-ref/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the ref.
- * @param {boolean} options.isHtml - If the value is HTML.
+ * @param {string} selector - The selector to use for targeting tables within the DOM (default: '.avalynx-ref').
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.isHtml - Treat the value as HTML (default: false).
+ *
  */
 
 export class AvalynxRef {

dist/js/avalynx-ref.js

@@ -10,8 +10,10 @@
  * @repository https://github.com/avalynx/avalynx-ref.git
  * @bugs https://github.com/avalynx/avalynx-ref/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the ref.
+ * @param {string} selector - The selector to use for targeting tables within the DOM (default: '.avalynx-ref').
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.isHtml - Treat the value as HTML (default: false).
+ *
  */
 
 class AvalynxRef {

docker-compose.yml

@@ -1,4 +1,3 @@
-version: "3.9"
 services:
   web:
     build: ./docker/web
@@ -18,4 +17,4 @@ services:
       - PHP_MEMORY_LIMIT=512M
       - PHP_MAX_EXECUTION_TIME=300
       - PHP_POST_MAX_SIZE=100M
-      - PHP_UPLOAD_MAX_FILESIZE=100M
+      - PHP_UPLOAD_MAX_FILESIZE=100M

examples/random-values.html

@@ -17,7 +17,7 @@
 	<script>hljs.highlightAll();</script>
 
 	<!-- AvalynxRef 0.0.2 -->
-	<script src="../dist/js/avalynx-ref.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/avalynx-ref.min.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "avalynx-ref",
   "title": "AvalynxRef",
-  "description": "AvalynxTable is a Ref implementation for updating elements with a value like React's Ref or Vue's Ref.",
+  "description": "AvalynxRef is a Ref implementation for updating elements with a value like React's Ref or Vue's Ref.",
   "version": "0.0.2",
   "license": "MIT",
   "main": "dist/js/avalynx-ref.js",

src/js/avalynx-ref.esm.js

@@ -10,9 +10,10 @@
  * @repository https://github.com/avalynx/avalynx-ref.git
  * @bugs https://github.com/avalynx/avalynx-ref/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the ref.
- * @param {boolean} options.isHtml - If the value is HTML.
+ * @param {string} selector - The selector to use for targeting tables within the DOM (default: '.avalynx-ref').
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.isHtml - Treat the value as HTML (default: false).
+ *
  */
 
 export class AvalynxRef {

src/js/avalynx-ref.js

@@ -10,8 +10,10 @@
  * @repository https://github.com/avalynx/avalynx-ref.git
  * @bugs https://github.com/avalynx/avalynx-ref/issues
  *
- * @param {string} selector - The selector for the element(s) to update.
- * @param {object} options - Options for the ref.
+ * @param {string} selector - The selector to use for targeting tables within the DOM (default: '.avalynx-ref').
+ * @param {object} options - An object containing the following keys:
+ * @param {boolean} options.isHtml - Treat the value as HTML (default: false).
+ *
  */
 
 class AvalynxRef {