@nativele/ts-dom 0.4.6 → 0.5.1
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 +59 -0
- package/README.md +46 -891
- package/README.zh-TW.md +46 -896
- package/dist/{a11y-wWL9rie7.mjs → a11y-CV3nBgBn.mjs} +1 -1
- package/dist/cli.mjs +227 -22
- package/dist/index.d.mts +16 -6
- package/dist/index.mjs +4 -1
- package/dist/{lint-CP_i4VPA.mjs → lint-DfUAh7t3.mjs} +17 -2
- package/dist/oxlint-plugin.mjs +2 -2
- package/dist/vite-plugin.mjs +1 -1
- package/llms.txt +12 -7
- package/package.json +4 -2
- package/skills/README.md +135 -0
- package/skills/_template/SKILL.md +57 -0
- package/skills/nativele-angular/SKILL.md +339 -0
- package/skills/nativele-core/SKILL.md +177 -0
- package/skills/nativele-integration/SKILL.md +125 -0
- package/skills/nativele-react/SKILL.md +213 -0
- package/skills/nativele-svelte/SKILL.md +259 -0
- package/skills/nativele-vite/SKILL.md +197 -0
- package/skills/nativele-vue/SKILL.md +279 -0
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,65 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Version
|
|
|
10
10
|
- Adding a lint rule is a minor change; lint rules are warnings or opt-in and do not count as breaking.
|
|
11
11
|
- Before every release run `npm run verify:pack` (`publint` and `attw`), `tsc`, the unit tests, the browser tests, `npm run smoke` and `npm run smoke:no-bundler`; all of them run in `.github/workflows/ci.yml`.
|
|
12
12
|
|
|
13
|
+
## 0.5.1
|
|
14
|
+
|
|
15
|
+
Nativele components now have a Skill for each major framework, every Skill is accepted only after a fresh agent has done real work with it, and the checks that those trials found wrong in real framework projects are fixed.
|
|
16
|
+
|
|
17
|
+
### Skills
|
|
18
|
+
|
|
19
|
+
- New `nativele-vue` (Official): Nativele components in an existing Vue 3 app. It covers an `isCustomElement` predicate that matches only the Nativele tags, so kebab-case Vue components such as `<router-link>` keep resolving; object props as properties, and `.prop` for an element that is not defined yet; prop plus event in place of `v-model`; exact event names; `<KeepAlive>` and `bind`; and a template type declaration built from `ts-dom-tags.ts`. Its example project runs in CI.
|
|
20
|
+
- New `nativele-vite` (Official): Nativele in an existing Vite app without a framework. It covers `tsDom({ dirs })` relative to Vite's `root`, multi-page builds, and a build script that runs `ts-dom check` before `vite build` so a clean checkout builds. It also says which edits reload the page during `vite dev`, and covers Vite+. Its example project, a multi-page app with `root` in a sub-folder, runs in CI.
|
|
21
|
+
- New `nativele-svelte` (Experimental): Nativele components in Svelte 5. It covers props as properties, `onitem-select` event attributes, `{#if}` and keyed `{#each}` children in slots, `bind:this`, and a `svelte/elements` type declaration.
|
|
22
|
+
- New `nativele-angular` (Experimental): Nativele components in Angular. It covers `CUSTOM_ELEMENTS_SCHEMA`, `[prop]` and `(item-select)` bindings, and zoneless change detection. Because the Angular builder takes no Vite plugins, `ts-dom gen` runs in npm `pre*` scripts. It also covers content projection and unit tests.
|
|
23
|
+
- New `nativele-integration` (Experimental): Nativele components in a framework without a Skill of its own, such as Preact or Solid. It covers the four questions to answer from the framework's documentation, defining components before mount, and the limits every framework shares.
|
|
24
|
+
- `nativele-core` and `nativele-react` were filled in where trial agents had to guess:
|
|
25
|
+
- the core Skill gains a complete example, the no-bundler page set-up, plain-element lists and event data;
|
|
26
|
+
- the React Skill starts from an existing React app, adds the `strict` and oxlint steps Vite's template needs, and type-checks with `tsc -p`, because a references-only root tsconfig checks nothing.
|
|
27
|
+
- The React, Vue and Svelte Skills start the template's type-check script with `ts-dom gen src/nv &&`. The generated files are not committed, so on a clean checkout that script otherwise fails with `TS2307`.
|
|
28
|
+
- Skill pull requests are accepted through an agent trial. A fresh agent gets only the packed package and the Skill, and does a task the Skill claims to cover. The result is checked independently, and every guess or error the Skill does not cover is sent back. Integration Skills start from the tool's own starter project and cover only what Nativele adds.
|
|
29
|
+
|
|
30
|
+
### Tooling
|
|
31
|
+
|
|
32
|
+
- `ts-dom check` runs `vue-tsc` instead of `tsc` when the project's `package.json` lists it: `vue-tsc` takes the same arguments, prints the same errors and reads `.vue` files, which plain `tsc` reports as `TS2307: Cannot find module './App.vue'`. When the checker cannot run, the message names it.
|
|
33
|
+
- `ts-dom doctor` checks `strict`, `lib` and `moduleResolution` only in the tsconfig files that cover the component folders, when there are any. Vite's templates no longer get `tsconfig-no-dom-lib` and `tsconfig-not-strict` for `tsconfig.node.json`, which covers only `vite.config.ts`, whether it lists it in `include` or in `files`.
|
|
34
|
+
- The generated `ts-dom-tags.ts` no longer ends with `export {}`, which linters reported as a useless empty export.
|
|
35
|
+
|
|
36
|
+
## 0.5.0
|
|
37
|
+
|
|
38
|
+
Nativele is a light, composable UI layer that grows its integrations through Skills instead of through the library. This version ships the first Skills and the command that delivers them, types `changed` and list event handlers more precisely, and adds recipes for common screens.
|
|
39
|
+
|
|
40
|
+
### Skills
|
|
41
|
+
|
|
42
|
+
- New `skills/` folder with the specification every Skill follows (versions it was verified with, set-up, a complete example, known limitations, verification commands; Official, Community and Experimental tiers) and a template for contributors. The package ships every `SKILL.md`.
|
|
43
|
+
- `nativele-core`: building components with Nativele, the `ts-dom check` loop and the rules an agent must follow (it replaces the README's "Rules for AI Agents").
|
|
44
|
+
- `nativele-react`: Nativele components in React 19, verified with React 19.3.1, Vite 8.3.5 and TypeScript 7.0.2: props as properties (define before render), `on<event-name>` handlers, children and slots (`shadow: true` or stable wrappers; Light DOM slots with changing React children are unsafe), lifecycle under StrictMode, and a TSX declaration that types every component's props and events from `ts-dom-tags.ts`. Its example project runs in a separate workflow (`skills.yml`) when a Skill or the library changes and once a month.
|
|
45
|
+
- `ts-dom skills` lists the Skills shipped with the installed version (tier, verified date and versions, and whether it is stale: older than six months or not covering the installed version); `ts-dom skills <name>` prints one; `ts-dom skills add <name...>` copies Skills into `.claude/skills/` when the project has `.claude`, otherwise into `.agents/skills/` (`--to=<dir>` for another folder). `--json` prints the list as data.
|
|
46
|
+
- `ts-dom doctor` suggests the Skills whose dependencies the project has (`skill-available`) and reports a project copy that differs from the shipped one (`skill-outdated`). Both are `info` and never change the exit code.
|
|
47
|
+
|
|
48
|
+
### Components
|
|
49
|
+
|
|
50
|
+
- `changed` in `render(view, changed)` also holds the derived values whose value changed (all of them on the first render), so `if (changed.has("visible")) this.lists.visible.items = view.visible` works for a derived list. Its type includes the derived names; annotate it with the names you check (`ReadonlySet<"items" | "visible">`) and tsc reports a misspelled name. The examples and guides no longer use `ReadonlySet<string>`.
|
|
51
|
+
- `EventHit<Item, KeyField>`: naming the item type and its key field (`hit: EventHit<Todo, "id">`) types `hit.item` as `Todo` and `hit.key` as `Todo["id"]`, with no cast.
|
|
52
|
+
|
|
53
|
+
### Lint
|
|
54
|
+
|
|
55
|
+
- New lint rule `unguarded-input-value` (in the `data-flow` group, and `ts-dom/unguarded-input-value` on its own): a `render()` that writes an `<input>`, `<textarea>` or `<select>` value without comparing it first, which moves the caret while the user types.
|
|
56
|
+
|
|
57
|
+
### Documentation
|
|
58
|
+
|
|
59
|
+
- New guide `docs/recipes.md` with `examples/recipes` and a real Chrome test: loading and error states from a shared store, showing store data in a component with state, a filtered list, events from list items, a modal dialog opened through a typed ref, and form validation.
|
|
60
|
+
- The guides say that `store.set` replaces the value (a component's `this.set` merges), that a component with `state`, `props` or `derive` shows store data by copying it into state, that a hidden `data-if` block keeps its elements and refs, and that Vite needs `"type": "module"` in `package.json`.
|
|
61
|
+
- The README's "Rules for AI Agents" becomes "Nativele Skills".
|
|
62
|
+
- The project's agent instructions are `AGENTS.md`, in English, and state the direction: a light UI foundation layer for larger applications, with integrations delivered as Skills.
|
|
63
|
+
- The README is now the introduction (the short version, Nativele Skills, a quick start with two examples, the example apps), and the full guide lives in `docs/`: templates, components and data flow, lists, recipes, setup and checks, performance, design, and developing Nativele. The guide is in English only; `README.zh-TW.md` mirrors the README. The components guide gains a table of the common DOM operations in `render` (text, `data-if` against `hidden`, attributes, classes, form values, lists).
|
|
64
|
+
- The README opens with a banner and the line "Designed for AI agents. Driven by TypeScript. Defined in vanilla HTML."; the package description, `llms.txt` and the repository description use the same wording, and describe the library as one for building web components rather than a UI library (it ships no ready-made components).
|
|
65
|
+
- The setup guide, the README and `ts-dom --help` say which commands write files: `ts-dom check` rewrites the generated files first, `ts-dom check --no-write` and `ts-dom gen --check` write nothing.
|
|
66
|
+
|
|
67
|
+
### Breaking changes
|
|
68
|
+
|
|
69
|
+
- `changed` in `render` now also holds derived names. Code that reads `changed.size` or iterates it sees more names; `changed.has(...)` checks on state and props behave as before.
|
|
70
|
+
- `EventHit` is now a type alias instead of an interface, so it can no longer be extended with `interface X extends EventHit`; intersect it instead (`EventHit & { ... }`).
|
|
71
|
+
|
|
13
72
|
## 0.4.6
|
|
14
73
|
|
|
15
74
|
Released together with 0.4.1 to 0.4.5, which were not published on their own.
|