@logimaxx/kviews.js 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +60 -0
- package/CODE_OF_CONDUCT.md +133 -0
- package/CONTRIBUTING.md +50 -0
- package/LICENSE +21 -0
- package/README.md +399 -0
- package/SECURITY.md +13 -0
- package/SUPPORT.md +16 -0
- package/dist/index.js +4039 -0
- package/dist/index.js.map +7 -0
- package/dist/kviews.js +4068 -0
- package/dist/kviews.js.map +7 -0
- package/dist/kviews.min.js +11 -0
- package/package.json +80 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project are documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [Unreleased]
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- npm package name is **`@logimaxx/kviews.js`** (renamed from `@logimaxx/kviews`). Install with `npm install @logimaxx/kviews.js`.
|
|
13
|
+
|
|
14
|
+
## [1.2.1]
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
18
|
+
- **`docs/examples/test.html`** — remade as a posts board demo with a two-column layout (collection + detail), compose form, and local JSON only (no external API).
|
|
19
|
+
- **`docs/examples/demo.css`** — self-contained styles for the example page (replaces Bootstrap in the demo).
|
|
20
|
+
- **`docs/examples/posts.json`** and **`post-1.json`** — JSON:API sample data with authors in `included`, status badges, and excerpts.
|
|
21
|
+
- **`docs/examples/collection.json`** and **`item.json`** — aligned with the posts example model.
|
|
22
|
+
- Removed legacy **`companies.json`** / **`company-1.json`** example files.
|
|
23
|
+
|
|
24
|
+
## [1.2.0] - 2026-05-20
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- npm package name is **`@logimaxx/kviews`** (unscoped `kviews` is blocked by npm as too similar to `iview`). Install with `npm install @logimaxx/kviews`.
|
|
29
|
+
- Release checklist script is now **`scripts/release.mjs`** (replaces `scripts/release.sh`).
|
|
30
|
+
|
|
31
|
+
### Added
|
|
32
|
+
|
|
33
|
+
- **Data adapters** — pluggable wire-format layer; default remains JSON:API (`adapter: 'jsonapi'`).
|
|
34
|
+
- **`PlainRestAdapter`** — built-in plain REST support via `adapter: 'plain'`.
|
|
35
|
+
- **`JsonApiAdapter`** — existing JSON:API parsing and serialization extracted into the default adapter.
|
|
36
|
+
- **`loadFromRemoteDoc()`** on `Item` — adapter-aware remote load; `loadFromJSONAPIDoc()` deprecated.
|
|
37
|
+
- **`KViews.defaultAdapter`**, **`KViews.registerAdapter()`** — global default and custom adapter registration.
|
|
38
|
+
- Exports: `JsonApiAdapter`, `PlainRestAdapter`, `resolveAdapter`, `registerAdapter`, `setDefaultAdapter`, `getDefaultAdapter`.
|
|
39
|
+
- Documentation: [docs/guides/adapters.md](docs/guides/adapters.md) and API updates for the `adapter` option.
|
|
40
|
+
- **`KViews.defaultHeaders`** (and `apiBaseConfig.defaultHeaders`) for default HTTP headers on every `fetch`.
|
|
41
|
+
- Per-instance **`headers`** and **`ajaxOpts`** for collections and items; documented merge order in `README.md` and `docs/`.
|
|
42
|
+
- **`KViews.basePath`** documented alongside `KViews.baseUrl` for resolving relative request URLs.
|
|
43
|
+
- **`CODE_OF_CONDUCT.md`** and **`SUPPORT.md`**; npm package `files` include community docs.
|
|
44
|
+
- Unit tests for adapters (`tests/unit/adapters.test.js`, `tests/unit/plain-rest-integration.test.js`).
|
|
45
|
+
|
|
46
|
+
### Fixed
|
|
47
|
+
|
|
48
|
+
- `createOverlay` returns a valid jQuery chain and uses `document.createElement("div")` for reliable DOM creation.
|
|
49
|
+
- `getRenderContext` includes `type` on flattened relationship objects, consistent with docs and tests.
|
|
50
|
+
- Test jQuery mock: two-argument `.data(key, value)` chains like jQuery even when `value` is `undefined`.
|
|
51
|
+
|
|
52
|
+
## [1.1.3] - 2026-05-04
|
|
53
|
+
|
|
54
|
+
### Fixed
|
|
55
|
+
|
|
56
|
+
- Item update and render-context fixes; test and documentation alignment (see git history for detail).
|
|
57
|
+
|
|
58
|
+
## [1.1.2] - 2026-05-04
|
|
59
|
+
|
|
60
|
+
Earlier releases — see git tags and commit history.
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# Contributor Covenant Code of Conduct
|
|
2
|
+
|
|
3
|
+
## Our pledge
|
|
4
|
+
|
|
5
|
+
We as members, contributors, and leaders pledge to make participation in our
|
|
6
|
+
community a harassment-free experience for everyone, regardless of age, body
|
|
7
|
+
size, visible or invisible disability, ethnicity, sex characteristics, gender
|
|
8
|
+
identity and expression, level of experience, education, socio-economic status,
|
|
9
|
+
nationality, personal appearance, race, caste, color, religion, or sexual identity
|
|
10
|
+
and orientation.
|
|
11
|
+
|
|
12
|
+
We pledge to act and interact in ways that contribute to an open, welcoming,
|
|
13
|
+
diverse, inclusive, and healthy community.
|
|
14
|
+
|
|
15
|
+
## Our standards
|
|
16
|
+
|
|
17
|
+
Examples of behavior that contributes to a positive environment for our
|
|
18
|
+
community include:
|
|
19
|
+
|
|
20
|
+
- Demonstrating empathy and kindness toward other people
|
|
21
|
+
- Being respectful of differing opinions, viewpoints, and experiences
|
|
22
|
+
- Giving and gracefully accepting constructive feedback
|
|
23
|
+
- Accepting responsibility and apologizing to those affected by our mistakes,
|
|
24
|
+
and learning from the experience
|
|
25
|
+
- Focusing on what is best not just for us as individuals, but for the
|
|
26
|
+
overall community
|
|
27
|
+
|
|
28
|
+
Examples of unacceptable behavior include:
|
|
29
|
+
|
|
30
|
+
- The use of sexualized language or imagery, and sexual attention or
|
|
31
|
+
advances of any kind
|
|
32
|
+
- Trolling, insulting or derogatory comments, and personal or political attacks
|
|
33
|
+
- Public or private harassment
|
|
34
|
+
- Publishing others' private information, such as a physical or email
|
|
35
|
+
address, without their explicit permission
|
|
36
|
+
- Other conduct which could reasonably be considered inappropriate in a
|
|
37
|
+
professional setting
|
|
38
|
+
|
|
39
|
+
## Enforcement responsibilities
|
|
40
|
+
|
|
41
|
+
Community leaders are responsible for clarifying and enforcing our standards of
|
|
42
|
+
acceptable behavior and will take appropriate and fair corrective action in
|
|
43
|
+
response to any behavior that they deem inappropriate, threatening, offensive,
|
|
44
|
+
or harmful.
|
|
45
|
+
|
|
46
|
+
Community leaders have the right and responsibility to remove, edit, or reject
|
|
47
|
+
comments, commits, code, wiki edits, issues, and other contributions that are
|
|
48
|
+
not aligned to this Code of Conduct, and will communicate reasons for moderation
|
|
49
|
+
decisions when appropriate.
|
|
50
|
+
|
|
51
|
+
## Scope
|
|
52
|
+
|
|
53
|
+
This Code of Conduct applies within all community spaces, and also applies when
|
|
54
|
+
an individual is officially representing the community in public spaces.
|
|
55
|
+
Examples of representing our community include using an official e-mail address,
|
|
56
|
+
posting via an official social media account, or acting as an appointed
|
|
57
|
+
representative at an online or offline event.
|
|
58
|
+
|
|
59
|
+
## Enforcement
|
|
60
|
+
|
|
61
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
62
|
+
reported to the community leaders responsible for enforcement at the contact
|
|
63
|
+
options listed on [logimaxx.ro](https://logimaxx.ro) or by reaching out to the
|
|
64
|
+
repository maintainers through GitHub. All complaints will be reviewed and
|
|
65
|
+
investigated promptly and fairly.
|
|
66
|
+
|
|
67
|
+
All community leaders are obligated to respect the privacy and security of the
|
|
68
|
+
reporter of any incident.
|
|
69
|
+
|
|
70
|
+
## Enforcement guidelines
|
|
71
|
+
|
|
72
|
+
Community leaders will follow these Community Impact Guidelines in determining
|
|
73
|
+
the consequences for any action they deem in violation of this Code of Conduct:
|
|
74
|
+
|
|
75
|
+
### 1. Correction
|
|
76
|
+
|
|
77
|
+
**Community Impact**: Use of inappropriate language or other behavior deemed
|
|
78
|
+
unprofessional or unwelcome in the community.
|
|
79
|
+
|
|
80
|
+
**Consequence**: A private, written warning from community leaders, providing
|
|
81
|
+
clarity around the nature of the violation and an explanation of why the
|
|
82
|
+
behavior was inappropriate. A public apology may be requested.
|
|
83
|
+
|
|
84
|
+
### 2. Warning
|
|
85
|
+
|
|
86
|
+
**Community Impact**: A violation through a single incident or series
|
|
87
|
+
of actions.
|
|
88
|
+
|
|
89
|
+
**Consequence**: A warning with consequences for continued behavior. No
|
|
90
|
+
interaction with the people involved, including unsolicited interaction with
|
|
91
|
+
those enforcing the Code of Conduct, for a specified period of time. This
|
|
92
|
+
includes avoiding interactions in community spaces as well as external channels
|
|
93
|
+
like social media. Violating these terms may lead to a temporary or
|
|
94
|
+
permanent ban.
|
|
95
|
+
|
|
96
|
+
### 3. Temporary ban
|
|
97
|
+
|
|
98
|
+
**Community Impact**: A serious violation of community standards, including
|
|
99
|
+
sustained inappropriate behavior.
|
|
100
|
+
|
|
101
|
+
**Consequence**: A temporary ban from any sort of interaction or public
|
|
102
|
+
communication with the community for a specified period of time. No public or
|
|
103
|
+
private interaction with the people involved, including unsolicited interaction
|
|
104
|
+
with those enforcing the Code of Conduct, is allowed during this period.
|
|
105
|
+
Violating these terms may lead to a permanent ban.
|
|
106
|
+
|
|
107
|
+
### 4. Permanent ban
|
|
108
|
+
|
|
109
|
+
**Community Impact**: Demonstrating a pattern of violation of community
|
|
110
|
+
standards, including sustained inappropriate behavior, harassment of an
|
|
111
|
+
individual, or aggression toward or disparagement of classes of individuals.
|
|
112
|
+
|
|
113
|
+
**Consequence**: A permanent ban from any sort of public interaction within
|
|
114
|
+
the community.
|
|
115
|
+
|
|
116
|
+
## Attribution
|
|
117
|
+
|
|
118
|
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
|
|
119
|
+
version 2.1, available at
|
|
120
|
+
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2_1].
|
|
121
|
+
|
|
122
|
+
Community Impact Guidelines were inspired by
|
|
123
|
+
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
|
|
124
|
+
|
|
125
|
+
For answers to common questions about this code of conduct, see the FAQ at
|
|
126
|
+
[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
|
|
127
|
+
[https://www.contributor-covenant.org/translations][translations].
|
|
128
|
+
|
|
129
|
+
[homepage]: https://www.contributor-covenant.org
|
|
130
|
+
[v2_1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
|
|
131
|
+
[Mozilla CoC]: https://github.com/mozilla/diversity
|
|
132
|
+
[FAQ]: https://www.contributor-covenant.org/faq
|
|
133
|
+
[translations]: https://www.contributor-covenant.org/translations
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Contributing to KViews
|
|
2
|
+
|
|
3
|
+
Thank you for helping improve KViews.
|
|
4
|
+
|
|
5
|
+
This project follows the [Code of Conduct](./CODE_OF_CONDUCT.md). By participating, you agree to uphold it.
|
|
6
|
+
|
|
7
|
+
## Development setup
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
git clone https://github.com/logimaxx/kviews.git
|
|
11
|
+
cd kviews
|
|
12
|
+
npm install
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Checks before you open a PR
|
|
16
|
+
|
|
17
|
+
1. **Tests** — all Vitest tests should pass:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm test
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
2. **Build** — the IIFE bundle should build without errors:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm run build
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
3. **End-to-end tests** (optional locally; CI can be extended to run them):
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm run test:e2e
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Guidelines
|
|
36
|
+
|
|
37
|
+
- Match the existing style in the files you touch.
|
|
38
|
+
- Add or update tests for behavior changes.
|
|
39
|
+
- Update user-facing docs (`README.md`, `docs/`) when the public API or install story changes. Any HTML or “quick start” snippet that loads KViews should mention **jQuery** and **Handlebars** as runtime dependencies (load **jQuery → Handlebars → KViews**).
|
|
40
|
+
|
|
41
|
+
## Pull requests
|
|
42
|
+
|
|
43
|
+
- One logical change per PR when possible.
|
|
44
|
+
- Describe **what** changed and **why** in the PR description.
|
|
45
|
+
|
|
46
|
+
## Publishing (maintainers)
|
|
47
|
+
|
|
48
|
+
See **[RELEASE_FLOW.md](./RELEASE_FLOW.md)** for the full checklist (tests, build, version bump, `CHANGELOG.md`, `npm publish`, tags).
|
|
49
|
+
|
|
50
|
+
Briefly: `npm publish` runs `prepack`, which runs `npm run build`, so `dist/` in the tarball matches the sources. Bump `package.json` (for example with `npm version patch`) only after `[Unreleased]` in `CHANGELOG.md` is ready for that version.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Sergiu Voicu, Logimaxx System SRL (https://logimaxx.ro)
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,399 @@
|
|
|
1
|
+
# KViews
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@logimaxx/kviews.js)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
A modern, class-based JavaScript library for binding API data to DOM elements. KViews provides a clean, declarative way to work with REST APIs (JSON:API by default, plain REST via adapters) and render data using Handlebars templates. **Runtime requirements:** [jQuery](https://jquery.com/) (DOM and selectors) and [Handlebars](https://handlebarsjs.com/) (templates); both are `peerDependencies` when you install from npm.
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- ✅ **Class-based architecture** - Modern ES6 classes for better organization
|
|
11
|
+
- ✅ **JSON API support** - Full JSON API specification support (default adapter)
|
|
12
|
+
- ✅ **Plain REST adapter** - Flat JSON APIs via `adapter: 'plain'`
|
|
13
|
+
- ✅ **Template rendering** - Handlebars template support for flexible rendering
|
|
14
|
+
- ✅ **Event system** - Comprehensive event handling for reactivity
|
|
15
|
+
- ✅ **jQuery required** - Uses jQuery exclusively for DOM manipulation
|
|
16
|
+
- ✅ **Filtering** - Built-in form filtering support
|
|
17
|
+
- ✅ **CRUD operations** - Create, Read, Update, Delete support
|
|
18
|
+
- ✅ **Bundle & ES6 modules** - Use as bundle or ES6 modules
|
|
19
|
+
- ✅ **TypeScript ready** - Written in modern JavaScript
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
### npm
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @logimaxx/kviews.js
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
ES module import (browser app with your bundler):
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import KViews from '@logimaxx/kviews.js';
|
|
33
|
+
// or: import { KViews, Collection, Item, Storage } from '@logimaxx/kviews.js';
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Peer dependencies: **Handlebars** and **jQuery** must be installed in your app (`npm install handlebars jquery`).
|
|
37
|
+
|
|
38
|
+
The **npm tarball** ships **`dist/`** only: `dist/index.js` is the ES module entry (`"main"` / `"exports"`), and `dist/kviews.js` / `dist/kviews.min.js` are IIFE bundles for `<script>` tags. The `src/` tree lives in the git repository for development. `npm publish` runs `prepack`, which runs `npm run build`, so published `dist/` always matches the release.
|
|
39
|
+
|
|
40
|
+
### Using Bundle (No Build Step Required)
|
|
41
|
+
|
|
42
|
+
Download `dist/kviews.js` and include it in your HTML:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
|
|
47
|
+
<script src="./dist/kviews.js"></script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Using ES6 modules
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
npm install @logimaxx/kviews.js
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Use `import` from the `kviews` package (see **Quick Start** below). To hack on the library itself, clone this repo and import from `src/index.js`.
|
|
57
|
+
|
|
58
|
+
### Requirements
|
|
59
|
+
|
|
60
|
+
Load **jQuery** before **Handlebars**, then KViews (bundle or your module entry), so globals `$` / `jQuery` and `Handlebars` exist when KViews runs.
|
|
61
|
+
|
|
62
|
+
- **jQuery** (required) — DOM manipulation and selectors throughout the library (`peerDependency`, typically ^3)
|
|
63
|
+
- **Handlebars** (required) — Template compilation (`peerDependency`, typically ^4)
|
|
64
|
+
- **Modern browser** — ES6 support (Chrome 61+, Firefox 60+, Safari 11+, Edge 16+)
|
|
65
|
+
|
|
66
|
+
## Quick Start
|
|
67
|
+
|
|
68
|
+
### Bundle Version
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<!DOCTYPE html>
|
|
72
|
+
<html>
|
|
73
|
+
<head>
|
|
74
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
75
|
+
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
|
|
76
|
+
<script src="./dist/kviews.js"></script>
|
|
77
|
+
</head>
|
|
78
|
+
<body>
|
|
79
|
+
<div id="posts">
|
|
80
|
+
<div class="post">
|
|
81
|
+
<h2>{{title}}</h2>
|
|
82
|
+
<p>{{content}}</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<script>
|
|
87
|
+
KViews.createCollectionInstance('#posts', {
|
|
88
|
+
url: '/api/posts',
|
|
89
|
+
type: 'posts'
|
|
90
|
+
});
|
|
91
|
+
</script>
|
|
92
|
+
</body>
|
|
93
|
+
</html>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### ES6 Modules
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<!DOCTYPE html>
|
|
100
|
+
<html>
|
|
101
|
+
<head>
|
|
102
|
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
103
|
+
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
|
|
104
|
+
</head>
|
|
105
|
+
<body>
|
|
106
|
+
<div id="posts">
|
|
107
|
+
<div class="post">
|
|
108
|
+
<h2>{{title}}</h2>
|
|
109
|
+
<p>{{content}}</p>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<script type="module">
|
|
114
|
+
// With a bundler (Vite, webpack, etc.) after `npm install @logimaxx/kviews.js`:
|
|
115
|
+
import KViews from '@logimaxx/kviews.js';
|
|
116
|
+
|
|
117
|
+
KViews.createCollectionInstance('#posts', {
|
|
118
|
+
url: '/api/posts',
|
|
119
|
+
type: 'posts'
|
|
120
|
+
});
|
|
121
|
+
</script>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Usage Examples
|
|
127
|
+
|
|
128
|
+
### Collections
|
|
129
|
+
|
|
130
|
+
```javascript
|
|
131
|
+
// Create a collection
|
|
132
|
+
const collection = KViews.createCollectionInstance('#posts', {
|
|
133
|
+
url: '/api/posts',
|
|
134
|
+
type: 'posts',
|
|
135
|
+
pageSize: 20
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
// Listen to events
|
|
139
|
+
collection.on('load', (collection) => {
|
|
140
|
+
log('Loaded', collection.items.length, 'items');
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
// Add new item
|
|
144
|
+
collection.append({
|
|
145
|
+
attributes: {
|
|
146
|
+
title: 'New Post',
|
|
147
|
+
content: 'Post content'
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Items
|
|
153
|
+
|
|
154
|
+
```javascript
|
|
155
|
+
// Create an item
|
|
156
|
+
const item = KViews.createItemInstance('#post-detail', {
|
|
157
|
+
url: '/api/posts/1',
|
|
158
|
+
type: 'posts'
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
// Update item
|
|
162
|
+
item.update({
|
|
163
|
+
attributes: {
|
|
164
|
+
title: 'Updated Title'
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
// Delete item
|
|
169
|
+
item.delete();
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Form Integration
|
|
173
|
+
|
|
174
|
+
```javascript
|
|
175
|
+
// Fill form with item data
|
|
176
|
+
KViews.helpers.fillForm('#edit-form', item);
|
|
177
|
+
|
|
178
|
+
// Capture form submission
|
|
179
|
+
KViews.helpers.captureFormSubmit('#create-form', (formData) => {
|
|
180
|
+
collection.append({ attributes: formData });
|
|
181
|
+
});
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### Filtering
|
|
185
|
+
|
|
186
|
+
```javascript
|
|
187
|
+
const collection = KViews.createCollectionInstance('#posts', {
|
|
188
|
+
url: '/api/posts',
|
|
189
|
+
type: 'posts',
|
|
190
|
+
filter: '#filter-form' // Form element for filtering
|
|
191
|
+
});
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
## API Overview
|
|
195
|
+
|
|
196
|
+
### KViews (Factory Class)
|
|
197
|
+
|
|
198
|
+
- `KViews.createCollectionInstance(el, opts)` - Create collection instance
|
|
199
|
+
- `KViews.createItemInstance(el, opts, data)` - Create item instance
|
|
200
|
+
- `KViews.baseUrl` - Prefix for relative request URLs (full origin or any path prefix)
|
|
201
|
+
- `KViews.basePath` - Same role as `baseUrl` when you only need a path prefix; ignored if `baseUrl` is set
|
|
202
|
+
- `KViews.defaultHeaders` - Default HTTP headers merged into every request (e.g. global auth); per-instance `headers` override on duplicate keys
|
|
203
|
+
- `KViews.helpers` - Utility functions (fillForm, captureFormSubmit, fetchFormData)
|
|
204
|
+
|
|
205
|
+
### HTTP: URLs and headers
|
|
206
|
+
|
|
207
|
+
Relative `url` values are resolved with `KViews.baseUrl` or `KViews.basePath` before `fetch`. Absolute `http(s)://` URLs are left unchanged.
|
|
208
|
+
|
|
209
|
+
Default headers apply app-wide; each collection or item can add or override headers via the `headers` option (and optional `ajaxOpts` for lower-level `Storage` defaults). Merge order is: **global `defaultHeaders` → instance / `Storage` defaults → per-request overrides** (later wins on the same header name).
|
|
210
|
+
|
|
211
|
+
```javascript
|
|
212
|
+
KViews.defaultHeaders = { Authorization: 'Bearer ' + token };
|
|
213
|
+
|
|
214
|
+
KViews.createCollectionInstance('#posts', {
|
|
215
|
+
url: '/api/posts',
|
|
216
|
+
type: 'posts',
|
|
217
|
+
headers: { 'X-Request-Id': crypto.randomUUID() }
|
|
218
|
+
});
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
With jQuery, `$.fn.kviews.baseUrl`, `basePath`, and `defaultHeaders` mirror the `KViews` static properties.
|
|
222
|
+
|
|
223
|
+
### Collection
|
|
224
|
+
|
|
225
|
+
- `loadFromRemote()` - Load data from API
|
|
226
|
+
- `append(itemData)` - Add new item
|
|
227
|
+
- `render()` - Render collection
|
|
228
|
+
- `on(event, callback)` - Event listeners
|
|
229
|
+
- `items` - Array of Item instances
|
|
230
|
+
|
|
231
|
+
### Item
|
|
232
|
+
|
|
233
|
+
- `loadFromRemote()` - Load item from API
|
|
234
|
+
- `update(data)` - Update item
|
|
235
|
+
- `delete()` - Delete item
|
|
236
|
+
- `render()` - Render item
|
|
237
|
+
- `on(event, callback)` - Event listeners
|
|
238
|
+
|
|
239
|
+
## Contributing, support, and security
|
|
240
|
+
|
|
241
|
+
We welcome issues and pull requests.
|
|
242
|
+
|
|
243
|
+
- **[CONTRIBUTING.md](./CONTRIBUTING.md)** — setup, tests, build, PR expectations
|
|
244
|
+
- **[SUPPORT.md](./SUPPORT.md)** — where to ask questions and report bugs
|
|
245
|
+
- **[CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md)** — community guidelines
|
|
246
|
+
- **[SECURITY.md](./SECURITY.md)** — **private** vulnerability reporting
|
|
247
|
+
- **[CHANGELOG.md](./CHANGELOG.md)** — release notes
|
|
248
|
+
- **[RELEASE_FLOW.md](./RELEASE_FLOW.md)** — checklist for maintainers cutting a release
|
|
249
|
+
|
|
250
|
+
## GitHub Pages
|
|
251
|
+
|
|
252
|
+
This repo includes a static site in [`website/`](./website/) (landing page, **live collection demo** that loads [`website/data/posts.json`](./website/data/posts.json), and a minimal bundle check page). The workflow [`.github/workflows/pages.yml`](.github/workflows/pages.yml) runs tests, builds `dist/`, copies `kviews.js` / `kviews.min.js` into `website/dist/`, and deploys to **GitHub Pages**.
|
|
253
|
+
|
|
254
|
+
**One-time setup in the GitHub repo**
|
|
255
|
+
|
|
256
|
+
1. Open **Settings → Pages**.
|
|
257
|
+
2. Under **Build and deployment**, set **Source** to **GitHub Actions** (not “Deploy from a branch”).
|
|
258
|
+
3. Push to `main` or `master` (or run the **Deploy GitHub Pages** workflow manually from the Actions tab).
|
|
259
|
+
|
|
260
|
+
The site will be available at **`https://logimaxx.github.io/kviews/`** (replace `logimaxx` with your user or org name if different). The first deploy may ask you to approve the **github-pages** environment.
|
|
261
|
+
|
|
262
|
+
## Documentation
|
|
263
|
+
|
|
264
|
+
Comprehensive documentation is available in the [`docs/`](./docs/) directory:
|
|
265
|
+
|
|
266
|
+
- **[API Reference](./docs/api/)** — class and method reference
|
|
267
|
+
- **[User guides](./docs/guides/)** — step-by-step tutorials ([adapters](./docs/guides/adapters.md) for JSON:API vs plain REST)
|
|
268
|
+
- **[Examples](./docs/examples/)** — sample HTML and JSON:API payloads
|
|
269
|
+
|
|
270
|
+
## Development
|
|
271
|
+
|
|
272
|
+
### Setup
|
|
273
|
+
|
|
274
|
+
```bash
|
|
275
|
+
git clone https://github.com/logimaxx/kviews.git
|
|
276
|
+
cd kviews
|
|
277
|
+
|
|
278
|
+
npm install
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
### Build
|
|
282
|
+
|
|
283
|
+
```bash
|
|
284
|
+
# Build bundle (normal + minified)
|
|
285
|
+
npm run build
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
This creates:
|
|
289
|
+
- `dist/kviews.js` - Normal bundle with sourcemap
|
|
290
|
+
- `dist/kviews.min.js` - Minified bundle
|
|
291
|
+
|
|
292
|
+
### Testing
|
|
293
|
+
|
|
294
|
+
```bash
|
|
295
|
+
# Run unit tests
|
|
296
|
+
npm run test
|
|
297
|
+
|
|
298
|
+
# Run tests in watch mode
|
|
299
|
+
npm run test:watch
|
|
300
|
+
|
|
301
|
+
# Run with coverage
|
|
302
|
+
npm run test:coverage
|
|
303
|
+
|
|
304
|
+
# Run E2E tests
|
|
305
|
+
npm run test:e2e
|
|
306
|
+
|
|
307
|
+
# Run all tests
|
|
308
|
+
npm run test:all
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
### Development Server
|
|
312
|
+
|
|
313
|
+
```bash
|
|
314
|
+
# Python
|
|
315
|
+
npm run serve:python
|
|
316
|
+
|
|
317
|
+
# PHP
|
|
318
|
+
npm run serve:php
|
|
319
|
+
|
|
320
|
+
# Node.js
|
|
321
|
+
npm run serve:node
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
## Project Structure
|
|
325
|
+
|
|
326
|
+
```
|
|
327
|
+
kviews.js/
|
|
328
|
+
├── src/ # Source code
|
|
329
|
+
│ ├── KViews.js # Main factory class
|
|
330
|
+
│ ├── Item.js # Item class
|
|
331
|
+
│ ├── Collection.js # Collection class
|
|
332
|
+
│ ├── Storage.js # HTTP operations
|
|
333
|
+
│ ├── URL.js # URL parsing
|
|
334
|
+
│ ├── utilities.js # Utility functions
|
|
335
|
+
│ └── ...
|
|
336
|
+
├── dist/ # Built bundles
|
|
337
|
+
├── docs/ # Documentation
|
|
338
|
+
│ ├── api/ # API reference
|
|
339
|
+
│ ├── guides/ # User guides
|
|
340
|
+
│ └── examples/ # Code examples
|
|
341
|
+
├── tests/ # Test suite
|
|
342
|
+
│ ├── unit/ # Unit tests
|
|
343
|
+
│ ├── integration/ # Integration tests
|
|
344
|
+
│ └── e2e/ # End-to-end tests
|
|
345
|
+
└── build.js # Build script
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
## Browser support
|
|
349
|
+
|
|
350
|
+
- **ES modules** (`import … from '@logimaxx/kviews.js'` via a bundler): evergreen browsers aligned with baseline ES modules (approx. Chrome 61+, Firefox 60+, Safari 11+, Edge 16+).
|
|
351
|
+
|
|
352
|
+
- **IIFE bundle** (`dist/kviews.js`): same modern JavaScript assumptions as the build (see `build.js`). Very old browsers (for example IE 11) are **not** a supported target unless you fork and downgrade the toolchain; use an evergreen browser or upgrade client environments.
|
|
353
|
+
|
|
354
|
+
## JSON API Format
|
|
355
|
+
|
|
356
|
+
KViews expects data in JSON API format:
|
|
357
|
+
|
|
358
|
+
```json
|
|
359
|
+
{
|
|
360
|
+
"data": {
|
|
361
|
+
"id": "1",
|
|
362
|
+
"type": "posts",
|
|
363
|
+
"attributes": {
|
|
364
|
+
"title": "Post Title",
|
|
365
|
+
"content": "Post content"
|
|
366
|
+
},
|
|
367
|
+
"relationships": {
|
|
368
|
+
"author": {
|
|
369
|
+
"data": {
|
|
370
|
+
"id": "123",
|
|
371
|
+
"type": "users"
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
## License
|
|
380
|
+
|
|
381
|
+
This project is licensed under the MIT License — see [LICENSE](./LICENSE).
|
|
382
|
+
|
|
383
|
+
## Changelog
|
|
384
|
+
|
|
385
|
+
Version history and migration notes live in **[CHANGELOG.md](./CHANGELOG.md)**.
|
|
386
|
+
|
|
387
|
+
## Support
|
|
388
|
+
|
|
389
|
+
See **[SUPPORT.md](./SUPPORT.md)** for documentation links, GitHub issues, and security reporting.
|
|
390
|
+
|
|
391
|
+
## Acknowledgments
|
|
392
|
+
|
|
393
|
+
- Built with modern JavaScript (ES6+)
|
|
394
|
+
- Uses [jQuery](https://jquery.com/) for DOM APIs and [Handlebars](https://handlebarsjs.com/) for templating
|
|
395
|
+
- Inspired by modern data-binding patterns
|
|
396
|
+
|
|
397
|
+
---
|
|
398
|
+
|
|
399
|
+
Created to tame complexity: code cleaner, work less.
|
package/SECURITY.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Security
|
|
2
|
+
|
|
3
|
+
If you believe you have found a security vulnerability in KViews, please report it responsibly.
|
|
4
|
+
|
|
5
|
+
**Preferred:** use [GitHub private vulnerability reporting](https://github.com/logimaxx/kviews/security/advisories/new) for this repository, if enabled.
|
|
6
|
+
|
|
7
|
+
Otherwise, open a **private** security advisory or contact the maintainers through the contact options listed on the [Logimaxx](https://logimaxx.ro) site or your existing support channel with the organization—please do **not** file public issues for undisclosed vulnerabilities.
|
|
8
|
+
|
|
9
|
+
Include steps to reproduce, affected versions, and impact if you can. Maintainers will acknowledge reputable reports when possible and coordinate fixes and disclosure.
|
|
10
|
+
|
|
11
|
+
## Disclosure policy
|
|
12
|
+
|
|
13
|
+
Please keep vulnerability details non-public until a fix or mitigation is agreed. Coordinate through private channels linked above—not through public GitHub issues.
|