From 4fb3c8304374c22f7ab8cf88195fed144d3348b0 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Wed, 12 May 2021 08:08:21 +0800
Subject: [PATCH] Update usage notes, prepare for publishing

We have added a more meaningful code sample in the README file.

Also, the publishing will happen on multiple registries, just like
`@theoryofnekomata/react-musical-keyboard`
---
 README.md    | 62 +++++++++++++++++++++++++++++++++++++++++++++-------
 package.json | 21 +++++++++++++++++-
 publish.sh   | 22 +++++++++++++++++++
 3 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 publish.sh

diff --git a/README.md b/README.md
index 74020df..2db757a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# get-form-values
+# formxtr
 
-Get the value of a form using `HTMLFormElement.elements`.
+Extract form values through the DOM.
 
 ## Installation
 
@@ -8,19 +8,65 @@ The library is not yet out on any package manager. Installing through the URL is
 
 ## Usage
 
+For an example form:
+
+```html
+<!-- ...  -->
+
+<form id="form">
+	<input type="text" name="username" />
+	<input type="password" name="password" />
+	<button type="submit" name="type" value="client">Log In As Client</button>
+	<button type="submit" name="type" value="admin">Log In As Admin</button>
+</form>
+
+<!-- ... --->
+```
+
+Use the library as follows (code is in TypeScript, but can work with JavaScript as well):
+
 ```typescript
-import getFormValues from '@theoryofnekomata/get-form-values';
+import getFormValues from '@theoryofnekomata/formxtr';
 
-const form = document.getElementById('form')
+const form: HTMLFormElement = document.getElementById('form');
 
 // optional, but just in case there are multiple submit buttons in the form,
 // individual submitters can be considered
-const submitter = form.querySelector('[type="submit"]')
+const submitter = form.querySelector('[type="submit"][name="type"][value="client"]');
+
+const values = getFormValues(form, submitter);
+
+const processResult = (result: Record<string, unknown>) => {
+  throw new Error('Not yet implemented.');
+};
+
+// Best use case is with event handlers
+form.addEventListener('submit', async e => {
+	const { target: form, submitter } = e;
+	e.preventDefault();
+
+	const values = getFormValues(form, submitter);
+
+	// Get the form values and send as request to some API
+	const response = await fetch(
+		'https://example.com/api/log-in',
+		{
+			method: 'POST',
+			body: JSON.stringify(values),
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		},
+	);
+
+	if (response.ok) {
+		const result = await response.json();
 
-const values = getFormValues(form, submitter)
+		processResult(result);
+	}
+})
 ```
 
 ## Tests
 
-The library has been tested on JSDOM through Jest, and the real DOM using
-Cypress.
+The library has been tested on JSDOM through Jest, and the real DOM using Cypress.
diff --git a/package.json b/package.json
index 791a4f2..2959beb 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,25 @@
     "dist",
     "src"
   ],
+	"publishing": {
+		"github": {
+			"repository": "https://github.com/TheoryOfNekomata/get-form-values.git",
+			"publishConfig": {
+				"registry": "https://npm.pkg.github.com"
+			}
+		},
+		"master": {
+			"repository": "https://code.modal.sh/TheoryOfNekomata/get-form-values.git",
+			"publishConfig": {
+				"registry": "https://js.pack.modal.sh"
+			}
+		},
+		"npm": {
+			"publishConfig": {
+				"registry": "https://registry.npmjs.com"
+			}
+		}
+	},
   "engines": {
     "node": ">=10"
   },
@@ -32,7 +51,7 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "get-form-values",
+  "name": "@theoryofnekomata/formxtr",
   "author": "TheoryOfNekomata",
   "module": "dist/get-form-values.esm.js",
   "size-limit": [
diff --git a/publish.sh b/publish.sh
new file mode 100644
index 0000000..a76e89f
--- /dev/null
+++ b/publish.sh
@@ -0,0 +1,22 @@
+defaultBranch=master
+
+for branch in $(cat package.json | jq .publishing | jq -r keys[]) ; do
+  echo "Selected configuration: $branch"
+
+  rawRepository=$(cat package.json | jq -r .publishing.$branch.repository)
+  repository=$(cat package.json | jq -r .publishing.$branch.repository)
+  defaultRepository=$(cat package.json | jq -r .publishing.$defaultBranch.repository)
+
+  if [ $repository = $defaultRepository ]; then
+    echo "Changing to default repository: $repository"
+    echo "$( jq --arg repository "$repository" '.repository = $repository' package.json )" > package.json
+  elif [ $rawRepository != 'null' ]; then
+    echo "Changing to mirror repository: $repository"
+    echo "$( jq --arg repository "$repository" '.repository = $repository' package.json )" > package.json
+  fi
+
+  registry=$(cat package.json | jq -r .publishing.$branch.publishConfig.registry)
+  echo "Publishing to package repository: $registry"
+  npm publish --registry=$registry --access public
+  git reset --hard
+done