Merge pull request #11 from simomosi/dev

Dev v1.3.0

docs/configurations/field-configuration.md → docs/configurations/fields-configuration.md

@@ -1,9 +1,9 @@
 # Field configuration
-This document describes a single field configuration.
+This document describes a single field configuration. The field configuration list must be included in the *fields* section in the [form configuration](./form-configuration.md).
 
-The field configuration must be included in the *fields* collection in the [form configuration](./form-configuration.md).
+Just specify fields with custom behavior as the standard ones will be discovered and included in the dynamic-form automatically.
 
-Here's a complete single field configuration:
+Here's a complete single field configuration. You just need to specify the attributes you need, the other will have default values.
 
 ```javascript
 let fieldConfiguration = {

docs/configurations/form-configuration.md

@@ -79,27 +79,23 @@ Useful to hide any loader after the form is ready.
 Returns
 - {`void`}
 
-## `fields`*
+## `fields`
 A collection of Fields configurations.
 
-Include here all fields involved in the DynamicForm behavior (get/set/update operations). Fields with no dynamic behavior may not be included.
+Include here fields with custom behavior (get/set/update operations). Standard fields will be discovered automatically.
 
-*required*
-
-See [Field configuration](field-configuration.md).
+See [Fields configuration](fields-configuration.md).
 
-## `rules`*
+## `rules`
 A collection of Update Rules configurations.
 
 Include here all rules like "if field A changes, trigger the update of fields B and C".
 
-*required*
-
-See [Update Rule configuration](./update-rules.md).
+See [Update Rules configuration](./update-rules.md).
 
 ## `init`
 A collection of Init Rules configurations.
 
 Include here all fields which will be updated during the DynamicForm instantiation.
 
-See [Initialisation Rule configuration](./init-rules.md).
+See [Initialisation Rules configuration](./init-rules.md).

docs/configurations/update-rules.md

@@ -4,8 +4,8 @@ These rules are used to manage fields update.
 ```javascript
 const updateRuleConfiguration = {
     name: 'fieldName',
-    update: [],  // Array of form fields names
-    additionalData: [], // Array of other field names to send to server
+    update: [],  // Array of form fields names to notify when events occour
+    additionalData: [], // Array of other form field names to send to server
     externalData: (data, subjectName) => { } // Function which returns a json of data
 };
 ```

docs/dev/todo_changelog.md

@@ -1,21 +1,23 @@
-# ToDo List
+## ToDo List
 
 - [ ] Use dynamic-forms with dynamically created fields
 
-# Changelog
+## Changelog
 Dynamic-forms follows the [semver](https://semver.org) standard.
 
-## Changelist
+#### 1.3.0
 
-### 1.2.0
+- Added automatic field discovery: you don't need to specify fields with standard behavior anymore
+
+#### 1.2.0
 
 - Supported fields initialisation
 - Added `form.ready()` method to synchronise post-initialisation operations
 
-### 1.0.1
+#### 1.0.1
 
 - Added support for nested input names ([link](https://github.com/simomosi/dynamic-forms/pull/3)). Thanks to [@yoannisj](https://github.com/yoannisj)
 
-### 1.0.0
+#### 1.0.0
 
 - First release

docs/start/installation.md

@@ -1,5 +1,5 @@
 # Installation
-## Using a package manager
+## Using a package manager (recommeded)
 
 === "npm"
     ```shell
@@ -10,11 +10,18 @@
     yarn add @simomosi/dynamic-forms
     ```
 
-This will put the library under the path `node_modules/@simomosi/dynamic-forms/dist/dynamicforms.min.js`
+## Using a CDN
+
+```html
+<script src='https://unpkg.com/@simomosi/dynamic-forms@latest'></script>
+```
+
+You can set the specific version (e.g. `[email protected]`), use tags (e.g. `dynamic-forms@latest`) or semver ranges (e.g. `dynamic-forms@^1.2.0`).
+See [UNPKG page](https://www.unpkg.com/) for more information.
 
 ## Using local files
-Download the last release from [GitHub release section](https://github.com/simomosi/dynamic-forms/releases). Extracts files in your assets folder and load them in your project (see section below).
+Download the last release from [GitHub release section](https://github.com/simomosi/dynamic-forms/releases). Extracts files in your assets folder and load them in your project (see next section).
 
-This is not the recommended method because you can't get updates automatically.
+This is not the recommended method because you can't get security updates automatically.
 
 If you still want to proceed this way, it is recommended to use the minified file (*dynamicforms.min.js*) for better performance.

docs/start/loading.md

@@ -1,10 +1,12 @@
 # Loading the library
 Choose your favorite import method
 
+## From installed sources
+
 === "ES6 Module"
     ```html
     <script type="module">
-        import * from 'your-assets-path/@simomosi/dynamic-forms/dist/dynamicforms.min.js';
+        import 'your-assets-path/@simomosi/dynamic-forms/dist/dynamicforms.min.js';
     </script>
     ```
 
@@ -15,5 +17,24 @@ Choose your favorite import method
 
 === "Script tag"
     ```html
-    <script src = 'your-assets-path/@simomosi/dynamic-forms/dist/dynamicforms.min.js'></script>
-    ```
+    <script src='your-assets-path/@simomosi/dynamic-forms/dist/dynamicforms.min.js'></script>
+    ```
+
+Note that 2 different sources exist:
+
+- `@simomosi/dynamic-forms/dist` (recommended) is transpiled with *Webpack* and *Babel* to enhance performance and ensure compatibility with different browsers
+- `@simomosi/dynamic-forms/src` is the actual source
+
+## From CDN
+
+=== "Script tag"
+    ```html
+    <script src = 'https://unpkg.com/@simomosi/dynamic-forms@latest'></script>
+    ```
+
+=== "ES6 Module"
+    ```html
+    <script type="module">
+        import 'https://unpkg.com/@simomosi/dynamic-forms@latest';
+    </script>
+    ```

docs/tldr/create_instance.md

@@ -2,7 +2,7 @@
 
 ## Preconditions
 
-Did you already [installed](../start/installation.md) and [loaded](../start/loading.md) the library? Then go on, you are almost there!
+<!-- Did you already [installed](../start/installation.md) and [loaded](../start/loading.md) the library? Then go on, you are almost there! -->
 
 Let's assume we are working on the following html form:
 
@@ -24,8 +24,8 @@ Let's assume we are working on the following html form:
 
 For the form configuration we need to write 2 lists:
 
-1. **fields**: a list of all form fields
-2. **rules**: a list which indicates when an event in a field (usually a `change`) should notify other fields
+1. **fields**: a list of form fields with custom behavior (using the following [format](../configurations/fields-configuration.md))
+2. **rules**: a list which indicates when a field related event (usually a `change`) should notify other fields (using the following [format](../configurations/update-rules.md))
 
 ```javascript
 const formConfiguration = {
@@ -36,10 +36,7 @@ const formConfiguration = {
             fetch: {
                 makeUrl: (data) => `https://url/to/api`,
             }
-        },
-        {
-            name: 'field_two'
-        },
+        }
     ],
     rules: [
         {
@@ -50,6 +47,8 @@ const formConfiguration = {
 };
 ```
 
+Note: we didn't specify `field_two`'s configuration.
+
 ## Create the dynamic form
 
 Create an instance and forget about it: dynamic-forms will work by itself!

docs/tldr/initial_status.md

@@ -7,7 +7,6 @@ You need to list all the fields which requires the initialisation, describing:
 1. Their **name**
 2. Their initial **value**, if you want to set one
 
-Dynamic-forms uses the information specified earlier to retrieve remote data for each field.
 
 ```javascript
 const formConfiguration = {
@@ -23,6 +22,13 @@ const formConfiguration = {
 };
 ```
 
+Dynamic-forms uses:
+
+- the information specified in the `fields` section to retrieve remote data for each field in the `init` section
+- the informations specified in the `rules` section to infer what data should be retrieved next
+
+In the example above, first `fields` and `init` rules will initialise `field_one`, then (update) `rules` will initialise `field_two` as specified in the previous page.
+
 If you need to specify other data, just list their name and value in the `init` collection just like they were form fields.
 
 ## Wait for complete initialisation

examples/index.html

@@ -143,14 +143,13 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
 
 
-    <!-- Dev mode (import as script tag) -->
+    <!-- CDN -->
+    <!-- <script src='https://unpkg.com/@simomosi/dynamic-forms@latest'></script> -->
+    <!-- Import sources as script tag -->
     <script src='../dist/dynamicforms.js'></script>
-    <!-- Prod mode (import as script tag) -->
-    <!--    <script src='../dist/dynamicforms.min.js'></script>-->
 
     <script defer>
-        // import '../dist/dynamicforms.js'; // Dev mode (import as module)
-        // import '../dist/dynamicforms.min.js'; // Prod mode (import as module)
+        // import '../dist/dynamicforms.js'; // Import sources as module
 
         const formConfiguration = {
             id: 'jsonPlaceholder',
@@ -228,12 +227,6 @@
                     }
                 }
             },
-            {
-                name: 'visibility-checkbox'
-            },
-            {
-                name: 'readonly-checkbox'
-            },
             {
                 name: 'checkbox-target-field',
                 behavior: {
@@ -254,9 +247,6 @@
                     },
                 },
             },
-            {
-                name: 'rows-radio'
-            },
             {
                 name: 'radio-target-textarea',
                 behavior: {

mkdocs.yml

@@ -17,7 +17,7 @@ nav:
   - Documentation:
     - How to use it: dynamic-forms-module.md
     - Form configuration: configurations/form-configuration.md
-    - Fields configuration: configurations/field-configuration.md
+    - Fields configuration: configurations/fields-configuration.md
     - Update rules: configurations/update-rules.md
     - Initialisation rules: configurations/init-rules.md
   - Developers:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simomosi/dynamic-forms",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "DynamicForms is a js library that handles all interactions in forms with dynamic content (e.g. select with variable options, updating rules and visibility changes depending on fields' state).",
   "main": "dist/dynamicforms.min.js",
   "browser": "dist/dynamicforms.min.js",

src/DynamicForm.js

@@ -51,8 +51,11 @@ class DynamicForm {
         this.debug = formConfiguration.debug === true;
         this.enabled = true;
         this.behavior = this.#repairFormBehavior(formConfiguration.behavior);
-        this.fields = this.#createFieldsInstancesMap(formConfiguration.fields, this.htmlElement);
-        this.fieldUpdateRules = this.#createFieldUpdateRulesMap(formConfiguration.fields, formConfiguration.rules);
+
+        const repairedConfigurationFields = this.#repairConfigurationFields(this.htmlElement, formConfiguration.fields ?? []);
+        this.fields = this.#createFieldsInstancesMap(repairedConfigurationFields, this.htmlElement);
+        this.fieldUpdateRules = this.#createFieldUpdateRulesMap(repairedConfigurationFields, formConfiguration.rules ?? []);
+
         const self = this;
         const initFields = formConfiguration.init ?? [];
 
@@ -67,6 +70,23 @@ class DynamicForm {
         behavior.afterUpdate = behavior.afterUpdate ?? ((subjectName) => {});
         return behavior;
     }
+
+    #repairConfigurationFields(formHtmlElement, configurationFields) {
+        const configurationFieldsNames = new Set();
+        configurationFields.forEach(v => configurationFieldsNames.add(v.name));
+
+        const formFieldsNames = new Set();
+        formHtmlElement.querySelectorAll('[name]').forEach(v => formFieldsNames.add(v.name));
+
+        formFieldsNames.forEach(v => {
+            if (!configurationFieldsNames.has(v)) {
+                configurationFields.push({
+                    name: v
+                });
+            }
+        });
+        return configurationFields;
+    }
 
     #createFieldsInstancesMap(fieldsCollection, htmlFormElement) {
         const fieldsMap = new Map();