Skip to content

Commit

Permalink
feat: add support for commonjs require
Browse files Browse the repository at this point in the history 
Add support for including the Smart Form Validator module using common js' `require` syntax. Update
demo GIF
  • Loading branch information
@simplymichael
simplymichael committed Dec 16, 2023
1 parent 0ba317f commit d414c23
Show file tree
Hide file tree
Showing 8 changed files with 54 additions and 23 deletions.
35 changes: 24 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ A highly customizable, "somewhat" declarative approach to HTML form fields valid


##
<img src="./imgs/smart-form-validator-demo-7.gif" alt="smart-form-validator Demo Sign-up Form" />
<img src="./imgs/smart-form-validator-demo-8.gif" alt="smart-form-validator Demo - Sign up form" />


## Installation

### NPM
Using npm:

```bash
npm install smart-form-validator --save
Expand All @@ -26,23 +26,36 @@ Later in our code:

```js
import SmartFormValidator from "smart-form-validator";
```

### Using the `<script>` tag

Add JS file to page:
// Or if you prefer:
// const SmartFormValidator = require("smart-form-validator");
```

Using jsDelivr CDN:
```html
<script
src="https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/smart-form-validator.min.js"></script>
src="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/smart-form-validator.min.js"></script>
```
`SmartFormValidator` is now available as a property of the global object.

Using unpkg CDN:
```html
<script src="https://unpkg.com/smart-form-validator/dist/smart-form-validator.min.js"></script>
```
`SmartFormValidator` is now available as a property of the global object.

### Using default effects styles
To get the default effects styles applied to our form fields, we need to add the CSS file to our page:
```css
<link
href="https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/css/smart-form-validator.min.css"
To get the default effects styles applied to our form fields, we need to add the CSS file to our page.

Using jsDelivr CDN:
```html
<link href="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/css/smart-form-validator.min.css"
rel="stylesheet" />
```

Using unpkg CDN:
```html
<link href="https://unpkg.com/smart-form-validator/dist/css/smart-form-validator.min.css"
rel="stylesheet" />
```

Expand Down
10 changes: 5 additions & 5 deletions examples/esm/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h3>Stand-alone input elements</h3>
<input id="submit-button" type="submit" value="Submit Form" />

<script type="module">
import SmartFormValidator from "../../dist/esm/index.js"; // import the SmartFormValidator
import SmartFormValidator from "../../dist/esm/smart-form-validator.js"; // import the SmartFormValidator module

const firstnameField = document.getElementById("firstname-field");
const acceptTermsField = document.getElementById("accept-terms-field");
Expand All @@ -41,7 +41,7 @@ <h3>Code</h3>
<code>
&lt;head&gt; <br />
&nbsp;&nbsp;&lt;link <br />
&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;rel="stylesheet" /&gt; <br />
&lt;/head&gt; <br /><br />
...
Expand All @@ -51,7 +51,7 @@ <h3>Code</h3>
&lt;input id="submit-button" type="submit" value="Submit Form" /&gt; <br /><br />

&lt;script type="module"&gt; <br />
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/esm/index.js"; &sol;&sol; import the SmartFormValidator
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator/dist/esm/smart-form-validator.js"; &sol;&sol; import the SmartFormValidator
<br /><br />

const firstnameField = document.getElementById("firstname-field"); <br />
Expand Down Expand Up @@ -80,7 +80,7 @@ <h3>Input elements belonging to an HTML form</h3>
</form>

<script type="module">
import SmartFormValidator from "../../dist/esm/index.js"; // import the SmartFormValidator
import SmartFormValidator from "../../dist/esm/smart-form-validator.js"; // import the SmartFormValidator

const form = document.getElementById("test-form");
const name = document.getElementById("name-field");
Expand All @@ -105,7 +105,7 @@ <h3>Code</h3>
&lt;/form&gt; <br /><br />

&lt;script type="module"&gt; <br />
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/esm/index.js"; &sol;&sol; import the SmartFormValidator
import SmartFormValidator from "https://cdn.jsdelivr.net/npm/smart-form-validator/dist/esm/smart-form-validator.js"; &sol;&sol; import the SmartFormValidator
<br /><br />

const form = document.getElementById("test-form"); <br />
Expand Down
4 changes: 2 additions & 2 deletions examples/umd/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ <h3>Code</h3>
<code>
&lt;head&gt; <br />
&nbsp;&nbsp;&lt;link <br />
&nbsp;&nbsp;&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;&nbsp;&nbsp;href="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/css/smart-form-validator.min.css" <br />
&nbsp;&nbsp;&nbsp;&nbsp;rel="stylesheet" /&gt; <br />

&nbsp;&nbsp;&lt;script src="https://cdn.jsdelivr.net/npm/smart-form-validator@0.1.0-alpha/dist/smart-form-validator.min.js"&gt;&lt;/script&gt; <br />
&nbsp;&nbsp;&lt;script src="https://cdn.jsdelivr.net/npm/smart-form-validator/dist/smart-form-validator.min.js"&gt;&lt;/script&gt; <br />
&lt;/head&gt; <br /><br />
...
<br /><br />
Expand Down
Binary file removed imgs/smart-form-validator-demo-6.gif
View file
Binary file not shown.
Binary file added imgs/smart-form-validator-demo-8.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed imgs/smart-form-validator-demo.gif
View file
Binary file not shown.
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
"name": "smart-form-validator",
"version": "0.1.0-alpha",
"description": "A highly customizable, \"somewhat\" declarative form validator.",
"main": "dist/esm/index.js",
"module": "dist/esm/index.js",
"main": "dist/cjs/smart-form-validator.js",
"module": "dist/esm/smart-form-validator.js",
"files": [
"dist"
],
"scripts": {
"prebuild": "npm run lint && npm run test:coverage",
"build": "shx rm -rf dist && npm run build:js && npm run build:css",
"build:dev": "shx rm -rf dist && npm run build:css && npm run build:js:dev",
"build": "npm run build:js && npm run build:css",
"build:dev": "npm run build:css && npm run build:js:dev",
"build:css": "shx mkdir -p ./dist/css && shx cat ./src/effects/**/*.css | postcss > ./dist/css/smart-form-validator.min.css",
"build:js": "cross-env NODE_ENV=production rollup -c",
"build:js:dev": "cross-env NODE_ENV=development rollup -c -w",
Expand Down
20 changes: 19 additions & 1 deletion rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,30 @@ function createConfig(env) {
plugins,
output: [
{
dir: "dist/esm",
file: `dist/esm/${pkg.name}.js`,
format: "esm",
exports: "default",
sourcemap: true,
},
],
},

// Common JS
{
input,
plugins: [
nodeResolve(),
commonjs({ strictRequires: true }),
babel({ babelHelpers: "bundled" }),
],
output: [
{
file: `dist/cjs/${pkg.name}.js`,
format: "cjs",
exports: "default",
sourcemap: true,
},
],
},
];
}

0 comments on commit d414c23

Please sign in to comment.