@pwrs/cem 0.1.13 → 0.1.16

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.
Files changed (2) hide show
  1. package/README.md +77 -58
  2. package/package.json +7 -7
package/README.md CHANGED
@@ -1,36 +1,17 @@
1
1
  # cem
2
2
 
3
- **cem** is a command-line tool for generating [Custom Elements Manifest][cem]
4
- (CEM) files from TypeScript sources. It analyzes your codebase and generates
3
+ **cem** is a command-line tool for generating and querying
4
+ [Custom Elements Manifest][cem] files. It can analyze your codebase and generate
5
5
  rich metadata for your custom elements, facilitating documentation, tooling, and
6
- integration.
7
-
8
- > [!NOTE]
9
- > `cem` best supports LitElements written in idiomatic style with
10
- > TypeScript decorators. There is rudimentary support for `extends HTMLElement`,
11
- > but it is not a high priority for development. If you need something more
12
- > specific [open an issue][issuenew].
6
+ integration. It can also query that manifest for information about your package
13
7
 
14
8
  ## Installation
15
9
 
16
- For go binaries:
17
- ```sh
18
- go install bennypowers.dev/cem@latest
19
- ```
20
-
21
- For NPM projects:
22
-
23
10
  ```sh
24
11
  npm install --save-dev @pwrs/cem
25
12
  ```
26
13
 
27
- Or clone this repository and build from source:
28
-
29
- ```sh
30
- git clone https://github.com/bennypowers/cem.git
31
- cd cem
32
- make
33
- ```
14
+ For more options, see [Installation docs][installationdocs]
34
15
 
35
16
  ## Features
36
17
 
@@ -42,6 +23,12 @@ make
42
23
  - Supports elements written in idiomatic Lit typescript style, with a
43
24
  `@customElement` decorator, and `@property` decorators on class fields.
44
25
 
26
+ > [!NOTE]
27
+ > `cem generate` best supports LitElements written in idiomatic style with
28
+ > TypeScript decorators. There is rudimentary support for `extends HTMLElement`,
29
+ > but it is not a high priority for development. If you need something more
30
+ > specific [open an issue][issuenew].
31
+
45
32
  #### JSDoc
46
33
  Use JSDoc comments to add metadata to your element classes, similar to other
47
34
  tools. Add a description by separating the name of the item with ` - `
@@ -122,12 +109,12 @@ variables
122
109
 
123
110
  ---
124
111
 
125
- ## Element Demos
112
+ #### Element Demos
126
113
 
127
114
  `cem generate` supports documenting your elements' demos by linking directly
128
115
  from JSDoc, or by configurable file-system based discovery.
129
116
 
130
- ### 1. JSDoc `@demo` Tag
117
+ ##### 1. JSDoc `@demo` Tag
131
118
 
132
119
  Add demos directly to your element class or members with the `@demo` tag:
133
120
 
@@ -144,7 +131,7 @@ class MyElement extends LitElement {
144
131
 
145
132
  Demos defined this way will always appear in your manifest for the element.
146
133
 
147
- ### 2. Demo Discovery
134
+ ##### 2. Demo Discovery
148
135
 
149
136
  `cem` can automatically discover demos from your codebase based on your
150
137
  repository structure and configuration.
@@ -171,36 +158,7 @@ generate:
171
158
  | `urlPattern` | string | Pattern for generating demo URLs, e.g. `"demos/{tag}.html"`. `{tag}` is replaced by tag name.|
172
159
  | `urlTemplate` | string | (optional) Alternative URL template for demo links. |
173
160
 
174
- ---
175
-
176
- ## Configuration Reference
177
-
178
- You can configure CEM via `.config/cem.yaml`, relative to your project root,
179
- or via CLI flags.
180
-
181
- ### Example Configuration
182
-
183
- ```yaml
184
- sourceControlRootUrl: "https://github.com/your/repo/tree/main/"
185
- generate:
186
- files:
187
- - "src/**/*.ts"
188
- exclude:
189
- - "src/**/*.test.ts"
190
- output: "custom-elements.json"
191
- noDefaultExcludes: false
192
- designTokens:
193
- spec: "npm:@my-ds/tokens/tokens.json"
194
- prefix: "--my-ds"
195
- demoDiscovery:
196
- fileGlob: "demos/**/*.html"
197
- urlPattern: "demos/(?P<tag>[\w-]+)/(?P<demo>[\w-]+).html"
198
- urlTemplate: "https://example.com/elements/{tag}/{demo}/"
199
- ```
200
-
201
- ---
202
-
203
- ## Usage
161
+ #### Usage
204
162
 
205
163
  Generate a custom elements manifest from your files:
206
164
 
@@ -214,7 +172,7 @@ cem generate \
214
172
 
215
173
  For npm projects you can use `npx @pwrs/cem generate ...`.
216
174
 
217
- ### Command Line Arguments
175
+ ##### Command Line Arguments
218
176
 
219
177
  | Argument | Type | Description |
220
178
  | ------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------- |
@@ -228,11 +186,71 @@ For npm projects you can use `npx @pwrs/cem generate ...`.
228
186
  | `--demo-discovery-url-pattern` | string | Go Regexp pattern with named capture groups for generating canonical demo urls |
229
187
  | `--demo-discovery-url-template` | string | URL pattern string using {groupName} syntax to interpolate named captures from the URL pattern |
230
188
  | `--source-control-root-url` | string | Glob pattern for discovering demo files |
231
-
189
+ | `--project-dir` | string | Specify the project root directory to use for resolving relative paths and configuration. |
232
190
 
233
191
  By default, some files (like `.d.ts` TypeScript declaration files) are excluded from the manifest.
234
192
  Use `--no-default-excludes` if you want to include all matching files and manage excludes yourself.
235
193
 
194
+ ---
195
+
196
+ ### `cem list`
197
+
198
+ The `cem list` command provides a fast, flexible way to inspect custom elements, their features, and their metadata directly from your manifest file.
199
+ With `cem list`, you can quickly explore and audit your custom elements API surface, making it easier to document, test, and share your components.
200
+
201
+ #### Available Subcommands
202
+
203
+ - `cem list tags` — Lists all custom element tag names in the project.
204
+ - `cem list -t <tag> attrs` — Lists all attributes for a given custom element tag.
205
+ - `cem list -t <tag> slots` — Lists all named and default slots for a tag.
206
+ - `cem list -t <tag> events` — Lists all custom events fired by a tag, including their types and descriptions.
207
+ - `cem list -t <tag> css-properties` — Lists CSS custom properties (CSS variables) for a tag.
208
+ - `cem list -t <tag> css-states` — Lists CSS custom states for a tag.
209
+ - `cem list -t <tag> css-parts` — Lists CSS shadow parts for a tag.
210
+ - `cem list -t <tag> methods` — Lists methods for a tag's DOM object.
211
+
212
+ #### Column Filtering and Output
213
+
214
+ - Use the `--columns,-c` flag to specify which columns to include in the output, e.g.:
215
+
216
+ ```sh
217
+ cem list events my-element -c name -c summary -c type
218
+ cem list attrs my-element -c description --columns default
219
+ ```
220
+ Note that the name column is always included, and that if a column is specified but contains only empty values for all rows, it is automatically omitted from the output for clarity.
221
+
222
+ #### Output Formats
223
+
224
+ - By default, tables are shown in a human-readable table format.
225
+ - [ ] TODO: json, markdown, flat lists, etc
226
+
227
+ ## Configuration Reference
228
+
229
+ You can configure CEM via `.config/cem.yaml`, relative to your project root,
230
+ or via CLI flags.
231
+
232
+ ### Example Configuration
233
+
234
+ ```yaml
235
+ sourceControlRootUrl: "https://github.com/your/repo/tree/main/"
236
+ generate:
237
+ files:
238
+ - "src/**/*.ts"
239
+ exclude:
240
+ - "src/**/*.test.ts"
241
+ output: "custom-elements.json"
242
+ noDefaultExcludes: false
243
+ designTokens:
244
+ spec: "npm:@my-ds/tokens/tokens.json"
245
+ prefix: "--my-ds"
246
+ demoDiscovery:
247
+ fileGlob: "demos/**/*.html"
248
+ urlPattern: "demos/(?P<tag>[\w-]+)/(?P<demo>[\w-]+).html"
249
+ urlTemplate: "https://example.com/elements/{tag}/{demo}/"
250
+ ```
251
+
252
+ ---
253
+
236
254
  ## Contributing
237
255
 
238
256
  For information on building and testing, please see
@@ -252,3 +270,4 @@ the terms of the [GNU General Public License v3.0][gpl3].
252
270
  [gpl3]: https://www.gnu.org/licenses/gpl-3.0.html
253
271
  [contributingmd]: ./CONTRIBUTING.md
254
272
  [issuenew]: https://github.com/bennypowers/cem/issues/new
273
+ [installationdocs]: https://bennypowers.github.io/cem/installation/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pwrs/cem",
3
- "version": "0.1.13",
3
+ "version": "0.1.16",
4
4
  "description": "CLI tool for generating and working with Custom Elements Manifests",
5
5
  "type": "module",
6
6
  "engines": {
@@ -13,12 +13,12 @@
13
13
  "postinstall": "node ./install-platform-binary.js"
14
14
  },
15
15
  "optionalDependencies": {
16
- "@pwrs/cem-linux-x64": "0.1.13",
17
- "@pwrs/cem-linux-arm64": "0.1.13",
18
- "@pwrs/cem-darwin-x64": "0.1.13",
19
- "@pwrs/cem-darwin-arm64": "0.1.13",
20
- "@pwrs/cem-win32-x64": "0.1.13",
21
- "@pwrs/cem-win32-arm64": "0.1.13"
16
+ "@pwrs/cem-linux-x64": "0.1.16",
17
+ "@pwrs/cem-linux-arm64": "0.1.16",
18
+ "@pwrs/cem-darwin-x64": "0.1.16",
19
+ "@pwrs/cem-darwin-arm64": "0.1.16",
20
+ "@pwrs/cem-win32-x64": "0.1.16",
21
+ "@pwrs/cem-win32-arm64": "0.1.16"
22
22
  },
23
23
  "files": [
24
24
  "bin/cem.js",