initial commit

.browserslistrc

@@ -0,0 +1 @@
+extends browserslist-config-nk

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,2 @@
+demo
+dist

.eslintrc

@@ -0,0 +1,6 @@
+
+{
+  "extends": [
+    "eslint-config-nk"
+  ]
+}

.gitattributes

@@ -0,0 +1,12 @@
+# Enforce Unix newlines
+*.css   text eol=lf
+*.html  text eol=lf
+*.js    text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+*.php   text eol=lf
+*.rb    text eol=lf
+*.scss  text eol=lf
+*.svg   text eol=lf
+*.txt   text eol=lf
+*.yml   text eol=lf

.github/workflows/npm-publish.yml

@@ -0,0 +1,24 @@
+# This workflow will publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1 @@
+node_modules

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+vendor
+vendors

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('prettier-config-nk');

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "streetsidesoftware.code-spell-checker",
+    "editorconfig.editorconfig",
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.defaultFormatter": null,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.formatOnSave": true
+}

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## [0.1.0] - Nov 26, 2023
+
+- initial release

README.md

@@ -1 +1,157 @@
-# ivents
+# ivents <!-- omit in toc -->
+
+![ivents.min.js](https://img.badgesize.io/nk-crew/ivents/master/dist/ivents.min.js?compression=gzip)
+
+Helper functions for browser event listener
+
+## Table of Contents <!-- omit in toc -->
+
+- [Import ivents](#import-ivents)
+  - [ESM](#esm)
+  - [ESM CDN](#esm-cdn)
+  - [UMD](#umd)
+  - [UMD CDN](#umd-cdn)
+  - [CJS (Bundlers like Webpack)](#cjs-bundlers-like-webpack)
+- [Methods](#methods)
+  - [on|one](#onone)
+  - [off](#off)
+  - [trigger](#trigger)
+- [For Developers](#for-developers)
+
+## Import ivents
+
+Use one of the following examples to import script.
+
+### ESM
+
+We provide a version of ivents built as ESM (ivents.esm.js and ivents.esm.min.js) which allows you to use ivents as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module).
+
+```html
+<script type="module">
+  import { on, off } from "ivents.esm.min.js";
+</script>
+```
+
+### ESM CDN
+
+```html
+<script type="module">
+  import { on, off } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
+</script>
+```
+
+### UMD
+
+ivents may be also used in a traditional way by including script in HTML and using library by accessing `window.ivents`.
+
+```html
+<script src="ivents.min.js"></script>
+```
+
+
+### UMD CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ivents.min.js"></script>
+```
+
+### CJS (Bundlers like Webpack)
+
+Install ivents as a Node.js module using npm
+
+```
+npm install ivents
+```
+
+Import ivents by adding this line to your app's entry point (usually `index.js` or `app.js`):
+
+```javascript
+import { on, off } from 'ivents';
+```
+
+## Methods
+
+### on|one
+
+DOM event listener:
+
+```javascript
+import { on } from 'ivents';
+
+on(document, 'click', (e) => {
+  console.log('clicked', e);
+});
+```
+
+Event listener with delegated target:
+
+```javascript
+import { on } from 'ivents';
+
+on(document, 'click', '.custom-element-selector', (e) => {
+  console.log('clicked', e);
+});
+```
+
+Custom event listener with namespace:
+
+```javascript
+import { on } from 'ivents';
+
+on(document, 'the-custom-event.with-namespace', (e) => {
+  console.log('clicked', e);
+});
+```
+
+### off
+
+Remove DOM event listener:
+
+```javascript
+import { on } from 'ivents';
+
+on(document, 'click', (e) => {
+  console.log('clicked', e);
+});
+
+off(document, 'click');
+```
+
+Remove DOM event listener by namespace:
+
+```javascript
+import { on } from 'ivents';
+
+on(document, 'click.my-namespace', (e) => {
+  console.log('clicked', e);
+});
+
+off(document, '.my-namespace');
+```
+
+### trigger
+
+Trigger event:
+
+```javascript
+import { trigger } from 'ivents';
+
+trigger(document, 'click', (e) => {
+  console.log('clicked', e);
+});
+```
+
+## For Developers
+
+### Installation <!-- omit in toc -->
+
+* Run `npm install` in the command line. Or if you need to update some dependencies, run `npm update`
+
+### Building <!-- omit in toc -->
+
+* `npm run build` to run build
+
+### Linting <!-- omit in toc -->
+
+* `npm run js-lint` to show eslint errors
+* `npm run js-lint-fix` to automatically fix some of the eslint errors

demo/esm.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test</title>
+  </head>
+  <body>
+    <nav>
+      <a href="esm.html">ESM</a>
+      <a href="umd.html">UMD</a>
+    </nav>
+    <h1>Test ivents calls as ESM.</h1>
+    <p>Check browser console for output.</p>
+    <button class="ivents-test-click">Click.</button>
+
+    <script type="module">
+      import { on, trigger } from "../dist/ivents.esm.min.js";
+
+      on(document, 'custom-event-name', (e) => {
+        e.preventDefault();
+        console.log('custom event triggered', e);
+      });
+      trigger(document, 'custom-event-name', { data: 'custom event data' });
+
+      on(window, 'load', (e) => {
+        console.log('window loaded', e);
+      });
+      on(document, 'click', '.ivents-test-click', (e) => {
+        e.preventDefault();
+        console.log('button clicked', e);
+      });
+    </script>
+  </body>
+</html>

demo/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test</title>
+  </head>
+  <body>
+    <nav>
+      <a href="esm.html">ESM</a>
+      <a href="umd.html">UMD</a>
+    </nav>
+  </body>
+</html>

demo/umd.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test</title>
+  </head>
+  <body>
+    <nav>
+      <a href="esm.html">ESM</a>
+      <a href="umd.html">UMD</a>
+    </nav>
+    <h1>Test ivents calls as UMD.</h1>
+    <p>Check browser console for output.</p>
+    <button class="ivents-test-click">Click.</button>
+
+    <script src="../dist/ivents.min.js"></script>
+    <script>
+      ivents.on(document, 'custom-event-name', (e) => {
+        e.preventDefault();
+        console.log('custom event triggered', e);
+      });
+      ivents.trigger(document, 'custom-event-name', { data: 'custom event data' });
+
+      ivents.on(window, 'load', (e) => {
+        console.log('window loaded', e);
+      });
+      ivents.on(document, 'click', '.ivents-test-click', (e) => {
+        e.preventDefault();
+        console.log('button clicked', e);
+      });
+    </script>
+  </body>
+</html>