@rmc-toolkit/vue 0.2.0 → 0.2.4
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/README.md +50 -0
- package/package.json +8 -3
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @rmc-toolkit/vue
|
|
2
|
+
|
|
3
|
+
Vue adapter for [Runtime Module Composition](https://runtime-module-composition.dev). Wraps the same resolve/import/mount/unmount lifecycle as `@rmc-toolkit/react` in a Vue composable. Takes your app's own already-resolved `Vue` instance rather than importing one itself, so this package never bundles a second, conflicting copy of Vue.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @rmc-toolkit/vue @rmc-toolkit/core vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick example
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
// src/rmc-adapter.ts
|
|
15
|
+
import * as Vue from "vue";
|
|
16
|
+
import { createVueAdapter } from "@rmc-toolkit/vue";
|
|
17
|
+
|
|
18
|
+
export const { useRuntimeHost } = createVueAdapter(Vue);
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
// App.vue (render-function form)
|
|
23
|
+
import { useRoute } from "vue-router";
|
|
24
|
+
import { useRuntimeHost } from "./rmc-adapter";
|
|
25
|
+
import { manifest } from "./runtime-composition.manifest";
|
|
26
|
+
|
|
27
|
+
export default {
|
|
28
|
+
setup() {
|
|
29
|
+
const route = useRoute();
|
|
30
|
+
const { target, status } = useRuntimeHost(() => route.fullPath, { manifest });
|
|
31
|
+
return { target, status };
|
|
32
|
+
},
|
|
33
|
+
template: `<main ref="target"></main>`,
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
`path` is a getter (`() => route.fullPath`), not a plain value, so the adapter can watch it reactively and re-resolve on navigation.
|
|
38
|
+
|
|
39
|
+
## What's in here
|
|
40
|
+
|
|
41
|
+
- `createVueAdapter(Vue)` → `{ useRuntimeHost }` — a composable wrapping `createRuntimeHostObservable`'s resolve/import/mount/unmount lifecycle, exposing `target` (a ref to bind to your mount element) and `status` (a reactive ref).
|
|
42
|
+
|
|
43
|
+
Full signature and behavior: [API Reference](https://runtime-module-composition.dev/api-reference/#vue-adapter-rmc-toolkitvue).
|
|
44
|
+
|
|
45
|
+
## Documentation
|
|
46
|
+
|
|
47
|
+
- [Getting Started](https://runtime-module-composition.dev/getting-started/) — install and wire up a host + slice end to end
|
|
48
|
+
- [API Reference](https://runtime-module-composition.dev/api-reference/#vue-adapter-rmc-toolkitvue)
|
|
49
|
+
- [Technical Implementation](https://runtime-module-composition.dev/technical-implementation/) — the architecture and failure modes behind the pattern
|
|
50
|
+
- [Multi-Framework Demo](https://runtime-module-composition.dev/demo/) — a full, runnable reference implementation, including a Vue slice
|
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rmc-toolkit/vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/runtime-module-composition/rmc-toolkit",
|
|
8
|
+
"directory": "packages/vue"
|
|
9
|
+
},
|
|
5
10
|
"main": "./dist/index.js",
|
|
6
11
|
"types": "./dist/index.d.ts",
|
|
7
12
|
"exports": {
|
|
@@ -17,11 +22,11 @@
|
|
|
17
22
|
"access": "public"
|
|
18
23
|
},
|
|
19
24
|
"peerDependencies": {
|
|
20
|
-
"@rmc-toolkit/core": "0.2.
|
|
25
|
+
"@rmc-toolkit/core": "0.2.4",
|
|
21
26
|
"vue": ">=3"
|
|
22
27
|
},
|
|
23
28
|
"dependencies": {
|
|
24
|
-
"@rmc-toolkit/core": "0.2.
|
|
29
|
+
"@rmc-toolkit/core": "0.2.4"
|
|
25
30
|
},
|
|
26
31
|
"scripts": {
|
|
27
32
|
"build": "tsc -b"
|