mikuru 1.0.1 → 1.0.2
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 +22 -16
- package/README.md +129 -95
- package/package.json +1 -1
- package/templates/starter/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
## 1.0.
|
|
4
|
-
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
## 1.0.
|
|
10
|
-
|
|
11
|
-
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
- Reworked the README for npm package consumers with CLI-first setup, Vite integration, package exports, TypeScript declarations, and v1 limits.
|
|
6
|
+
- Updated npm usage docs and release documentation to match the published package contents.
|
|
7
|
+
- Updated the starter template to depend on `mikuru@^1.0.2`.
|
|
8
|
+
|
|
9
|
+
## 1.0.1
|
|
10
|
+
|
|
11
|
+
- Added the `mikuru` CLI with `mikuru create [project-name]`.
|
|
12
|
+
- Added a Vite starter template that shows a Mikuru welcome screen and counter after setup.
|
|
13
|
+
- Added create CLI smoke coverage and included it in CI.
|
|
14
|
+
|
|
15
|
+
## 1.0.0
|
|
16
|
+
|
|
17
|
+
- Stabilized the v1 SFC compiler surface for `.mikuru` files.
|
|
12
18
|
- Added Vite integration, generated DOM cleanup, component props/events/slots, `defineProps`, and `defineEmits`.
|
|
13
19
|
- Added `v-if` / `v-else-if` / `v-else`, `v-show`, `v-for`, `v-model`, DOM event modifiers, style injection, and basic scoped CSS support.
|
|
14
20
|
- Added CI, library build checks, basic example build checks, and browser E2E coverage.
|
|
15
21
|
- Added a realworld example, public package smoke test, parser-limit coverage, debug sourceURL support, and performance smoke coverage.
|
|
16
|
-
- Added v3 source maps, keyed `v-for` reuse, npm pack smoke coverage, and a v1 API contract.
|
|
17
|
-
- Added a dogfood notes app written in Mikuru to exercise daily authoring flows.
|
|
18
|
-
- Added generated DOM coverage for keyed insert/remove/reorder behavior, component cleanup, and slot cleanup.
|
|
19
|
-
- Added explicit unsupported-syntax errors with source frames, Vite error forwarding coverage, and debug `sourceURL` path normalization coverage.
|
|
20
|
-
- Documented runtime helpers including `nextTick`, `watch`, lifecycle callbacks, `provide`, and `inject`.
|
|
22
|
+
- Added v3 source maps, keyed `v-for` reuse, npm pack smoke coverage, and a v1 API contract.
|
|
23
|
+
- Added a dogfood notes app written in Mikuru to exercise daily authoring flows.
|
|
24
|
+
- Added generated DOM coverage for keyed insert/remove/reorder behavior, component cleanup, and slot cleanup.
|
|
25
|
+
- Added explicit unsupported-syntax errors with source frames, Vite error forwarding coverage, and debug `sourceURL` path normalization coverage.
|
|
26
|
+
- Documented runtime helpers including `nextTick`, `watch`, lifecycle callbacks, `provide`, and `inject`.
|
package/README.md
CHANGED
|
@@ -1,18 +1,48 @@
|
|
|
1
1
|
# Mikuru
|
|
2
2
|
|
|
3
|
-
Mikuru
|
|
3
|
+
Mikuru is a compile-first JavaScript framework for Vue-like single-file components that generate direct DOM update code instead of using a virtual DOM.
|
|
4
4
|
|
|
5
|
-
Vue
|
|
5
|
+
It is intentionally small. Mikuru v1 is a practical validation release for writing `.mikuru` components in Vite apps, not a Vue compatibility layer.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Requirements
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
- `ref`、`computed`、`effect` 風の小さなリアクティビティを提供する。
|
|
12
|
-
- `{{ value }}`、`@click` / `v-on:click`、`:class` / `v-bind:class`、`v-if`、`v-for` のようなVue風テンプレート構文を使う。
|
|
13
|
-
- コンパイラが更新箇所を静的に把握し、直接DOMを更新するコードを生成する。
|
|
9
|
+
- Node.js 22 or newer
|
|
10
|
+
- Vite 8 or newer for app development
|
|
14
11
|
|
|
15
|
-
##
|
|
12
|
+
## Create a New App
|
|
13
|
+
|
|
14
|
+
The fastest way to try Mikuru is the package CLI:
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
npx mikuru create my-app
|
|
18
|
+
cd my-app
|
|
19
|
+
npm install
|
|
20
|
+
npm run dev
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The generated starter includes Vite, TypeScript, a `.mikuru` module declaration, and a welcome component at `src/App.mikuru`.
|
|
24
|
+
|
|
25
|
+
## Add Mikuru to a Vite App
|
|
26
|
+
|
|
27
|
+
Install Mikuru and the Vite tooling:
|
|
28
|
+
|
|
29
|
+
```sh
|
|
30
|
+
npm install mikuru
|
|
31
|
+
npm install -D vite typescript
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Configure Vite:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { defineConfig } from "vite";
|
|
38
|
+
import { mikuru } from "mikuru/vite";
|
|
39
|
+
|
|
40
|
+
export default defineConfig({
|
|
41
|
+
plugins: [mikuru()]
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Create a `.mikuru` component:
|
|
16
46
|
|
|
17
47
|
```mikuru
|
|
18
48
|
<template>
|
|
@@ -36,120 +66,124 @@ button {
|
|
|
36
66
|
</style>
|
|
37
67
|
```
|
|
38
68
|
|
|
39
|
-
|
|
69
|
+
Mount it from your app entry:
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
import { mount } from "./App.mikuru";
|
|
40
73
|
|
|
41
|
-
|
|
42
|
-
import { ref, effect } from "mikuru/runtime";
|
|
74
|
+
const app = document.querySelector("#app");
|
|
43
75
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
76
|
+
if (!app) {
|
|
77
|
+
throw new Error("Missing #app");
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
mount(app);
|
|
81
|
+
```
|
|
47
82
|
|
|
48
|
-
|
|
49
|
-
count.value += 1;
|
|
50
|
-
}
|
|
83
|
+
## TypeScript Declarations
|
|
51
84
|
|
|
52
|
-
|
|
85
|
+
Until Mikuru ships global `.mikuru` declarations, add a local declaration file such as `src/mikuru-env.d.ts`:
|
|
53
86
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
87
|
+
```ts
|
|
88
|
+
declare module "*.mikuru" {
|
|
89
|
+
export type MikuruComponentInstance = {
|
|
90
|
+
element: Element | Comment;
|
|
91
|
+
unmount(): void;
|
|
92
|
+
};
|
|
57
93
|
|
|
58
|
-
|
|
94
|
+
export function mount(
|
|
95
|
+
target: Element | DocumentFragment,
|
|
96
|
+
props?: Record<string, unknown>
|
|
97
|
+
): MikuruComponentInstance;
|
|
98
|
+
|
|
99
|
+
const component: {
|
|
100
|
+
mount: typeof mount;
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default component;
|
|
59
104
|
}
|
|
60
105
|
```
|
|
61
106
|
|
|
62
|
-
## v1
|
|
107
|
+
## Supported v1 Surface
|
|
108
|
+
|
|
109
|
+
- `.mikuru` SFCs with `<template>`, `<script>`, and `<style>`
|
|
110
|
+
- Vite plugin support through `mikuru/vite`
|
|
111
|
+
- Template interpolation with `{{ value }}`
|
|
112
|
+
- DOM events with `@click`, `v-on:click`, `.prevent`, and `.stop`
|
|
113
|
+
- Attribute bindings with `:class` and `v-bind:class`
|
|
114
|
+
- `v-if`, `v-else-if`, `v-else`, `v-show`, and `v-for`
|
|
115
|
+
- `v-model` for common form controls and child components
|
|
116
|
+
- Component props, events, `defineProps`, `defineEmits`, and default slots
|
|
117
|
+
- Runtime helpers including `ref`, `computed`, `effect`, `watch`, `nextTick`, lifecycle callbacks, `provide`, and `inject`
|
|
118
|
+
- Style injection and basic `<style scoped>` selector rewriting
|
|
119
|
+
- Compile errors with filenames, line/column information, and code frames
|
|
120
|
+
|
|
121
|
+
## Package Exports
|
|
122
|
+
|
|
123
|
+
Application code usually imports from `mikuru`:
|
|
63
124
|
|
|
64
|
-
|
|
125
|
+
```ts
|
|
126
|
+
import { computed, ref } from "mikuru";
|
|
127
|
+
```
|
|
65
128
|
|
|
66
|
-
|
|
129
|
+
The Vite plugin is available from `mikuru/vite`:
|
|
67
130
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
- イベント: `@click="increment"`、`v-on:click="increment"`、DOMイベントの `.prevent` / `.stop`
|
|
72
|
-
- 属性バインド: `:class="className"`、`v-bind:class="className"`
|
|
73
|
-
- class正規化: `:class="['base', { active }]"` の配列・オブジェクト形式
|
|
74
|
-
- フォーム同期: `input` / `textarea` / `checkbox` / `select` の `v-model`
|
|
75
|
-
- 条件分岐: `v-if` / `v-else-if` / `v-else`
|
|
76
|
-
- 表示切り替え: `v-show="visible"`
|
|
77
|
-
- 繰り返し: `v-for="item in items"`、`v-for="(item, index) in items"`、`of` エイリアス
|
|
78
|
-
- コンポーネント合成: `<Child :count="count" @select="select" />` のprops/event受け渡し、`v-model`
|
|
79
|
-
- default slot: `<Panel>content</Panel>` と子側の `<slot />`
|
|
80
|
-
- props宣言: `const { title } = defineProps()` のコンパイル専用API
|
|
81
|
-
- emits宣言: `const emit = defineEmits()` で親の `@event` ハンドラを呼び出し
|
|
82
|
-
- style注入: `<style>` をmount時に一度だけdocumentへ追加し、`<style scoped>` の基本セレクタを書き換える
|
|
83
|
-
- unmount: 生成コンポーネントがイベント、effect、子コンポーネントを破棄する
|
|
84
|
-
- パーサ強化: コメント、シングルクォート属性、属性値内の `>`、void要素に対応
|
|
85
|
-
- 式検証: テンプレート式をExpressionとして検証し、文や代入など危険な構文を拒否
|
|
86
|
-
- エラー表示: コンパイルエラーにファイル名、行、列、コードフレームを付与
|
|
87
|
-
- 小さなランタイム: `ref`、`computed`、`effect`
|
|
131
|
+
```ts
|
|
132
|
+
import { mikuru } from "mikuru/vite";
|
|
133
|
+
```
|
|
88
134
|
|
|
89
|
-
|
|
135
|
+
Compiler and runtime entries are public for lower-level integrations:
|
|
90
136
|
|
|
91
|
-
|
|
137
|
+
```ts
|
|
138
|
+
import { compile } from "mikuru/compiler";
|
|
139
|
+
import { effect, nextTick, ref, unwrap, watch } from "mikuru/runtime";
|
|
140
|
+
```
|
|
92
141
|
|
|
93
|
-
|
|
142
|
+
The package also provides the `mikuru` binary:
|
|
143
|
+
|
|
144
|
+
```sh
|
|
145
|
+
npx mikuru create my-app
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Not Included in v1
|
|
149
|
+
|
|
150
|
+
Mikuru does not claim Vue compatibility. The v1 package does not include SSR, hydration, transitions, devtools, named slots, slot props, dynamic components, `v-html`, object-form `v-bind` / `v-on`, or full template type checking.
|
|
151
|
+
|
|
152
|
+
Scoped CSS is a basic selector rewrite, not a full CSS compiler. Avoid relying on `:global()`, deep selectors, complex nesting, CSS Modules, or preprocessors in v1.
|
|
153
|
+
|
|
154
|
+
## Repository Development
|
|
155
|
+
|
|
156
|
+
For local framework development:
|
|
94
157
|
|
|
95
158
|
```sh
|
|
96
159
|
npm install
|
|
97
160
|
npm run ci
|
|
98
161
|
```
|
|
99
162
|
|
|
100
|
-
|
|
163
|
+
Useful targeted checks:
|
|
101
164
|
|
|
102
165
|
```sh
|
|
103
166
|
npm run typecheck
|
|
104
167
|
npm test
|
|
105
168
|
npm run build
|
|
106
|
-
npm run
|
|
107
|
-
npm run
|
|
108
|
-
npm run
|
|
109
|
-
npm run test:
|
|
110
|
-
|
|
111
|
-
npm run test:e2e
|
|
112
|
-
npm run test:e2e:dogfood
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
公式exampleはViteで起動できます。
|
|
169
|
+
npm run test:create
|
|
170
|
+
npm run test:package
|
|
171
|
+
npm run test:pack
|
|
172
|
+
npm run test:e2e
|
|
173
|
+
```
|
|
116
174
|
|
|
117
|
-
|
|
118
|
-
npm run dev:basic
|
|
119
|
-
npm run dev:realworld
|
|
120
|
-
npm run dev:dogfood
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
用途は次の通りです。
|
|
124
|
-
|
|
125
|
-
- `examples/basic`: カウンター、props/events、component `v-model`、default slot の最小確認
|
|
126
|
-
- `examples/realworld`: 検索、フォーム、keyed list を含むアプリ風の検証
|
|
127
|
-
- `examples/dogfood`: Mikuru自身で書いた notes app による日常的な書き心地の検証
|
|
128
|
-
- `examples/mikuru-sample` / `examples/mikuru-vue-like`: 追加の手書きDOM/runtimeサンプル
|
|
129
|
-
|
|
130
|
-
表示するときは、ブラウザで example の `index.html` を直接開かず、Viteが表示するローカルURLを開いてください。`.ts` と `.mikuru` はVite pluginで変換されます。
|
|
131
|
-
|
|
132
|
-
exampleを本番ビルドする場合は次を使います。
|
|
175
|
+
Examples can be run from the repository root:
|
|
133
176
|
|
|
134
177
|
```sh
|
|
135
|
-
npm run
|
|
136
|
-
npm run
|
|
137
|
-
npm run
|
|
178
|
+
npm run dev:basic
|
|
179
|
+
npm run dev:realworld
|
|
180
|
+
npm run dev:dogfood
|
|
181
|
+
npm run dev:mikuru-sample
|
|
182
|
+
npm run dev:mikuru-vue-like
|
|
138
183
|
```
|
|
139
184
|
|
|
140
|
-
##
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
新しいMikuruアプリはCLIから作成できます。
|
|
147
|
-
|
|
148
|
-
```sh
|
|
149
|
-
npx mikuru create my-app
|
|
150
|
-
cd my-app
|
|
151
|
-
npm install
|
|
152
|
-
npm run dev
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
生成されるスターターは、Viteの初期画面のようにMikuruのウェルカム画面を表示します。`src/App.mikuru` を編集するとHMRで画面が更新されます。
|
|
185
|
+
## Documentation
|
|
186
|
+
|
|
187
|
+
- `CHANGELOG.md` lists published package changes.
|
|
188
|
+
- `docs/npm-usage.md` shows a manual Vite setup for package consumers.
|
|
189
|
+
- `docs/v1-api-contract.md` describes the v1 compatibility boundary used by this repository.
|
package/package.json
CHANGED