@ucla-library/component-library-nuxt-module 1.3.50 → 1.4.0
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 +189 -66
- package/dist/module.json +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -1,80 +1,203 @@
|
|
|
1
|
-
|
|
2
|
-
Get your module up and running quickly.
|
|
1
|
+
# UCLA Library Component Library Nuxt Module
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
- Name: My Module
|
|
6
|
-
- Package name: my-module
|
|
7
|
-
- Description: My new Nuxt module
|
|
8
|
-
-->
|
|
3
|
+
This package exposes the UCLA Library Vue Component Library as a Nuxt module. It automatically registers all exported Vue components and injects the shared component library stylesheet into a Nuxt application.
|
|
9
4
|
|
|
10
|
-
|
|
5
|
+
## Package Layout
|
|
11
6
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
```
|
|
8
|
+
packages/
|
|
9
|
+
├── vue-component-library/ # Vue component library
|
|
10
|
+
└── component-library-nuxt-module/
|
|
11
|
+
├── src/ # Nuxt module source
|
|
12
|
+
├── playground/ # Manual development application
|
|
13
|
+
└── test/fixtures/ # Automated test applications
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
---
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
# Prerequisites
|
|
18
19
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
Install dependencies from the monorepo root.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
pnpm install
|
|
24
|
+
```
|
|
22
25
|
|
|
23
|
-
|
|
26
|
+
---
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
# Development Workflow
|
|
26
29
|
|
|
27
|
-
|
|
30
|
+
This package depends on the Vue component library package.
|
|
28
31
|
|
|
29
|
-
|
|
32
|
+
Whenever you make changes to the Vue component library, rebuild the workspace first.
|
|
30
33
|
|
|
31
|
-
|
|
34
|
+
From the **monorepo root**:
|
|
32
35
|
|
|
33
36
|
```bash
|
|
34
|
-
|
|
37
|
+
pnpm run build
|
|
35
38
|
```
|
|
36
39
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
40
|
+
This builds:
|
|
41
|
+
|
|
42
|
+
- `packages/vue-component-library`
|
|
43
|
+
- `packages/component-library-nuxt-module`
|
|
44
|
+
|
|
45
|
+
and refreshes the workspace links between both packages.
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
# Running the Playground
|
|
50
|
+
|
|
51
|
+
The playground is a real Nuxt application used for manual development.
|
|
52
|
+
|
|
53
|
+
Start it from the **monorepo root**:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
pnpm run nuxt-module:prepare
|
|
57
|
+
pnpm run nuxt-module:dev
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Normally you only need to run `nuxt-module:prepare` after:
|
|
61
|
+
|
|
62
|
+
- installing dependencies
|
|
63
|
+
- changing Nuxt configuration
|
|
64
|
+
- deleting `.nuxt`
|
|
65
|
+
|
|
66
|
+
During normal development you can usually just run:
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
pnpm run nuxt-module:dev
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
# Building the Playground
|
|
75
|
+
|
|
76
|
+
To verify that the playground builds successfully as a production Nuxt application:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
pnpm --filter @ucla-library/component-library-nuxt-module run dev:build
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Use this before opening a PR or when investigating production-only issues.
|
|
83
|
+
|
|
84
|
+
This is **not** part of the normal development workflow.
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
# Building the Module
|
|
89
|
+
|
|
90
|
+
To build the publishable Nuxt module:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm run nuxt-module:build
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
This runs the module's `prepack` script and produces the distributable package in:
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
packages/component-library-nuxt-module/dist/
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Normally you only run this when verifying the package before publishing.
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
# Testing
|
|
107
|
+
|
|
108
|
+
There are two ways to test the module.
|
|
109
|
+
|
|
110
|
+
## Playground
|
|
111
|
+
|
|
112
|
+
The playground is intended for manual testing.
|
|
113
|
+
|
|
114
|
+
Use it to verify:
|
|
115
|
+
|
|
116
|
+
- components auto-import correctly
|
|
117
|
+
- CSS is loaded
|
|
118
|
+
- components render correctly
|
|
119
|
+
- module configuration behaves correctly
|
|
120
|
+
- browser behaviour
|
|
121
|
+
|
|
122
|
+
The playground loads the module from source:
|
|
123
|
+
|
|
124
|
+
```ts
|
|
125
|
+
modules: ["@radya/nuxt-dompurify", "../src/module"];
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## Test Fixtures
|
|
131
|
+
|
|
132
|
+
The fixtures are used by `@nuxt/test-utils`.
|
|
133
|
+
|
|
134
|
+
Unlike the playground, they create a minimal Nuxt application specifically for automated tests.
|
|
135
|
+
|
|
136
|
+
Example:
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
import MyModule from "../../../src/module";
|
|
140
|
+
|
|
141
|
+
export default defineNuxtConfig({
|
|
142
|
+
modules: [MyModule],
|
|
143
|
+
});
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Use fixtures for:
|
|
147
|
+
|
|
148
|
+
- integration tests
|
|
149
|
+
- automated testing
|
|
150
|
+
- module installation tests
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
# Common Commands
|
|
155
|
+
|
|
156
|
+
Run all commands from the **monorepo root**.
|
|
157
|
+
|
|
158
|
+
| Task | Command |
|
|
159
|
+
| -------------------- | -------------------------------------------------------------------------- |
|
|
160
|
+
| Install dependencies | `pnpm install` |
|
|
161
|
+
| Build workspace | `pnpm run build` |
|
|
162
|
+
| Prepare playground | `pnpm run nuxt-module:prepare` |
|
|
163
|
+
| Start playground | `pnpm run nuxt-module:dev` |
|
|
164
|
+
| Build module | `pnpm run nuxt-module:build` |
|
|
165
|
+
| Run tests | `pnpm --filter @ucla-library/component-library-nuxt-module run test` |
|
|
166
|
+
| Type check | `pnpm --filter @ucla-library/component-library-nuxt-module run test:types` |
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
# Gotchas
|
|
171
|
+
|
|
172
|
+
## Always build the workspace first
|
|
173
|
+
|
|
174
|
+
If you modify the Vue component library, run:
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
pnpm run build
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
before testing the Nuxt module.
|
|
181
|
+
|
|
182
|
+
The module depends on the built output of the Vue component library.
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
## Playground vs Test Fixtures
|
|
187
|
+
|
|
188
|
+
These are different environments.
|
|
189
|
+
|
|
190
|
+
| Playground | Test Fixtures |
|
|
191
|
+
| --------------------- | ------------------------ |
|
|
192
|
+
| Manual development | Automated tests |
|
|
193
|
+
| Browser testing | Integration testing |
|
|
194
|
+
| Full Nuxt application | Minimal Nuxt application |
|
|
195
|
+
| Interactive | Non-interactive |
|
|
196
|
+
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
## Publishing
|
|
200
|
+
|
|
201
|
+
Publishing is handled by GitHub Actions.
|
|
202
|
+
|
|
203
|
+
During publishing, `pnpm publish` automatically runs the module's `prepack` script to build the distributable package before it is published.
|
package/dist/module.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ucla-library/component-library-nuxt-module",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@nuxt/kit": "^3.15.4",
|
|
31
|
-
"@ucla-library-monorepo/ucla-library-website-components": "^1.
|
|
31
|
+
"@ucla-library-monorepo/ucla-library-website-components": "^1.79.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@nuxt/devtools": "^1.7.0",
|
|
@@ -45,12 +45,13 @@
|
|
|
45
45
|
"vue-tsc": "^2.1.6"
|
|
46
46
|
},
|
|
47
47
|
"engines": {
|
|
48
|
-
"
|
|
48
|
+
"node": "^24.16.0",
|
|
49
|
+
"pnpm": "^11.5.1"
|
|
49
50
|
},
|
|
50
51
|
"scripts": {
|
|
51
52
|
"dev": "nuxi dev playground",
|
|
52
53
|
"dev:build": "nuxi build playground",
|
|
53
|
-
"dev:prepare": "nuxt
|
|
54
|
+
"dev:prepare": "nuxt prepare playground",
|
|
54
55
|
"build": "pnpm run dev:prepare",
|
|
55
56
|
"release": "semantic-release",
|
|
56
57
|
"lint": "eslint .",
|