浏览代码

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`
master
父节点
当前提交
4fb3c83043
共有 3 个文件被更改,包括 96 次插入9 次删除
  1. +54
    -8
      README.md
  2. +20
    -1
      package.json
  3. +22
    -0
      publish.sh

+ 54
- 8
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.

+ 20
- 1
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": [


+ 22
- 0
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

正在加载...
取消
保存