@updog/data-editor-wc 0.1.93 → 0.1.94
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/AGENTS.md +72 -0
- package/README.md +2 -2
- package/package.json +3 -2
package/AGENTS.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# @updog/data-editor-wc for coding agents
|
|
2
|
+
|
|
3
|
+
Updog Importer is a client-side CSV and Excel importer and spreadsheet editor. This package is the Web Component build, the `<updog-editor>` element, for Vue, Angular, Svelte, and plain JavaScript. A user picks a file, matches its columns to your schema, fixes invalid cells, edits rows, and submits. Your app receives the rows in `onComplete` and writes them to its own backend. File contents stay in the browser; Updog runs no server in the data path.
|
|
4
|
+
|
|
5
|
+
React apps use `@updog/data-editor` instead; it shares the app's React and ships the same engine as typed props.
|
|
6
|
+
|
|
7
|
+
Unrelated to Datadog's Updog dashboard and the sc0tfree/updog HTTP server.
|
|
8
|
+
|
|
9
|
+
## Integrate
|
|
10
|
+
|
|
11
|
+
1. `npm install @updog/data-editor-wc`. Import the package once for its side effect and import the stylesheet:
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import "@updog/data-editor-wc";
|
|
15
|
+
import "@updog/data-editor-wc/styles.css";
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
2. Place `<updog-editor>` in the markup. Primitive settings go as attributes: `api-key`, `primary-key`, `mode`, `variant`, `locale`, `open`, `rtl`, `readonly`.
|
|
19
|
+
3. Describe the target shape as `columns`, one entry per field: `id`, `title`, optional `validators` and `editor`. Pick a `primaryKey` column. Rows with the same key upsert.
|
|
20
|
+
4. Set objects and functions through `configure()` or a property assignment on the element, never through a template binding. A callback written as `:onComplete="save"` or `[onComplete]="save"` does nothing in Vue and Svelte and breaks the Angular build.
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
const editor = document.querySelector("updog-editor");
|
|
24
|
+
editor.configure({ apiKey, primaryKey: "id", columns, onComplete: save });
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
5. Default is a modal: open it with `editor.show()`, close it with `editor.hide()`, and listen for the bubbling `close` event, which fires on the X button and Escape. `mode="inline"` renders in place, with no `show`/`hide` and no `close` event. `variant="uploader"` opens on the file step.
|
|
28
|
+
6. In `onComplete(result)` split rows by their flags, send them to your own endpoint, and show loading, success, and failure states around that request.
|
|
29
|
+
7. Angular: add `CUSTOM_ELEMENTS_SCHEMA` to the component that renders the element and the stylesheet to the `styles` array in `angular.json`. Vue and Svelte need no configuration.
|
|
30
|
+
|
|
31
|
+
Done when a file imports end to end and the rows land in your backend through your own request.
|
|
32
|
+
|
|
33
|
+
## `onComplete`
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
result.sources[]: { sourceId, sourceName, rows: { row, isNew, isChanged, isDeleted, isValid }[] }
|
|
37
|
+
result.counts: { new, changed, deleted, invalid }
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Inserts are `isNew && !isDeleted && isValid`. Updates are `!isNew && isChanged && !isDeleted && isValid`. Deletes are `isDeleted && !isNew`. One source per imported file or workbook sheet, plus each source you tagged in `loadData`. Backend rows nothing changed are left out.
|
|
41
|
+
|
|
42
|
+
## `loadData`
|
|
43
|
+
|
|
44
|
+
Optional. `editor.loadData = async (onChunk) => { onChunk(await fetchRows()) }` streams existing rows into the editor so users edit them and import on top. Tag chunks with `{ source, done }` to keep origins apart in the result.
|
|
45
|
+
|
|
46
|
+
## Keys and environments
|
|
47
|
+
|
|
48
|
+
`apiKey` is a license key and is public in the browser by design. Localhost and preview domains (Vercel, Netlify, Cloudflare Pages, Lovable, Bolt, v0, Replit, StackBlitz, and similar) run free with every feature. A production domain is $19 a month. Keys come from https://console.updog.tech/.
|
|
49
|
+
|
|
50
|
+
## Facts
|
|
51
|
+
|
|
52
|
+
- Formats: CSV, XLSX, XLS, XLSB, ODS, TSV, JSON, XML. Any other format, PDFs and scans included, through `customFormats` with a parser function you supply.
|
|
53
|
+
- Parsing and filtering run in Web Workers; matching, validation, and editing run in the browser. One million rows across 20 columns is the reference benchmark, and no plan caps rows.
|
|
54
|
+
- Cell editors: `text`, `select`, `multiselect`, `date`, `time`, `number`, `boolean`, `country`, `currency`.
|
|
55
|
+
- Validators: `required`, `email`, `regex`, `number`, `date`, `oneOf`, `unique`, and `function` for your own rule, including cross-field rules.
|
|
56
|
+
- Several files in one import, one source per workbook sheet, upsert by primary key, user-created columns for unmatched headers.
|
|
57
|
+
- Column and value matching are built in (fuzzy plus synonyms); `onColumnMatch` and `onValueMatch` override them with your own code or model.
|
|
58
|
+
- AI is bring-your-own. The `chat` property and the matching hooks take your model and your request; Updog never calls a provider.
|
|
59
|
+
- Theming through CSS variables, white-label on every plan. The element inherits the page `font-family`, so set one on the app or on `updog-editor`. `translations`, `locale`, `rtl`, keyboard navigation, screen-reader roles.
|
|
60
|
+
- Several `<updog-editor>` elements on one page stay independent. In modal mode the editor renders into `document.body` as a full-screen overlay.
|
|
61
|
+
|
|
62
|
+
## Out of scope
|
|
63
|
+
|
|
64
|
+
Unattended ingestion, scheduled ETL, SFTP feeds, server-side file processing, and hosted storage of imported data. Those belong to a server-side pipeline.
|
|
65
|
+
|
|
66
|
+
## Links
|
|
67
|
+
|
|
68
|
+
- Console, where license keys are issued: https://console.updog.tech/
|
|
69
|
+
- Docs: https://docs.updog.tech
|
|
70
|
+
- This contract as a docs page: https://docs.updog.tech/agents/
|
|
71
|
+
- One-page product overview for machines: https://updog.tech/updog.md
|
|
72
|
+
- Examples for React, Next.js, Vue, Angular, Svelte, and vanilla JS: https://github.com/michaeladze-updog/updog-examples
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# CSV
|
|
1
|
+
# CSV and Excel importer Web Component, with a spreadsheet editor
|
|
2
2
|
|
|
3
|
-
> `@updog/data-editor-wc`: client-side CSV importer and spreadsheet editor, shipped as a Web Component for Vue, Angular, Svelte, and vanilla JS. Your users import files, match columns to your schema, fix errors, and submit clean data. Edits happen inline, in the browser, at 1M+ rows.
|
|
3
|
+
> `@updog/data-editor-wc`: client-side CSV and Excel importer and spreadsheet editor, shipped as a Web Component for Vue, Angular, Svelte, and vanilla JS. Your users import files, match columns to your schema, fix errors, and submit clean data. Edits happen inline, in the browser, at 1M+ rows.
|
|
4
4
|
|
|
5
5
|
## What is @updog/data-editor-wc
|
|
6
6
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@updog/data-editor-wc",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "Client-side CSV importer and spreadsheet editor as a Web Component. Drop into Vue, Angular, Svelte, or vanilla JS. Import CSV, Excel, JSON; edit 1M+ rows entirely in the browser.",
|
|
3
|
+
"version": "0.1.94",
|
|
4
|
+
"description": "Client-side CSV and Excel importer and spreadsheet editor as a Web Component. Drop into Vue, Angular, Svelte, or vanilla JS. Import CSV, Excel, JSON; edit 1M+ rows entirely in the browser.",
|
|
5
5
|
"author": "Mikhail Kutateladze <admin@updog.tech>",
|
|
6
6
|
"homepage": "https://updog.tech",
|
|
7
7
|
"bugs": {
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"index.d.ts",
|
|
25
25
|
"assets",
|
|
26
26
|
"README.md",
|
|
27
|
+
"AGENTS.md",
|
|
27
28
|
"LICENSE",
|
|
28
29
|
"CHANGELOG.md",
|
|
29
30
|
"SECURITY.md",
|