Skip to content

Commit 4d13fd8

Browse files
committed
feat: update helpers
1 parent cf429ae commit 4d13fd8

File tree

8 files changed

+229
-23
lines changed

8 files changed

+229
-23
lines changed

.github/workflows/main.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,5 @@ jobs:
3131
yarn
3232
cd packages/analyzer
3333
npm test
34+
cd ../helpers
35+
npm test

packages/helpers/README.md

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# @custom-elements-manifest/helpers
2+
3+
Custom-elements.json is a file format that describes custom elements. This format will allow tooling and IDEs to give rich information about the custom elements in a given project.
4+
5+
This library aims to ship some helpers to ease working with the `custom-elements.json` format.
6+
7+
## Install
8+
9+
```bash
10+
npm i -S @custom-elements-manifest/helpers
11+
```
12+
13+
## Usage
14+
15+
```js
16+
// Node
17+
import { CustomElementsJson } from '@custom-elements-manifest/helpers';
18+
19+
const manifest = JSON.parse(fs.readFileSync('./custom-elements.json', 'utf-8'));
20+
const customElementsJson = new CustomElementsJson(manifest);
21+
22+
// Browser
23+
import { CustomElementsJson } from 'https://unpkg.com/@custom-elements-manifest?module';
24+
import manifest from './custom-elements.json' assert { type: 'json' };
25+
26+
const customElementsJson = new CustomElementsJson(manifest);
27+
```
28+
29+
## Methods
30+
31+
### `getByTagName`
32+
33+
Gets a declaration by tagName
34+
35+
```js
36+
customElementsJson.getByTagName('my-element');
37+
```
38+
39+
### `getByClassName`
40+
Get a declaration by className
41+
42+
```js
43+
customElementsJson.getByClassName('MyElement');
44+
```
45+
46+
### `getByMixinName`
47+
Gets a declaration by mixinName
48+
49+
```js
50+
customElementsJson.getByMixinName('MyElement');
51+
```
52+
### `getCustomElements`
53+
Gets all custom elements
54+
55+
```js
56+
customElementsJson.getCustomElements();
57+
```
58+
59+
### `getClasses`
60+
Gets all classes. Note that this may include classes that are not custom elements
61+
62+
```js
63+
customElementsJson.getClasses();
64+
```
65+
66+
### `getFunctions`
67+
Gets all functions
68+
69+
```js
70+
customElementsJson.getFunctions();
71+
```
72+
73+
### `getVariables`
74+
Gets all variables
75+
76+
```js
77+
customElementsJson.getVariables();
78+
```
79+
80+
### `getDefinitions`
81+
Gets all custom element definitions.
82+
83+
```js
84+
customElementsJson.getDefinitions();
85+
```
86+
87+
### `getMixins`
88+
Gets all mixins
89+
90+
```js
91+
customElementsJson.getMixins();
92+
```
93+
94+
### `getInheritanceTree`
95+
96+
Gets an elements inheritance tree, including superclasses and mixins
97+
98+
```js
99+
customElementsJson.getInheritanceTree('MyElement');
100+
```
101+
102+
### `getModuleForClass`
103+
104+
Gets the module path for a given class
105+
106+
```js
107+
customElementsJson.getModuleForClass('MyElement');
108+
```
109+
110+
### `getModuleForMixin`
111+
112+
Gets the module path for a given mixin
113+
114+
```js
115+
customElementsJson.getModuleForMixin('FooMixin');
116+
```
117+
118+
## Helpers
119+
120+
### Package
121+
- `hasModules`
122+
- `hasExports`
123+
- `hasDeclarations`
124+
- `isJavascriptModule`
125+
126+
### Exports
127+
- `isCustomElementExport`
128+
- `isJavaScriptExport`
129+
130+
### Declarations
131+
- `isClass`
132+
- `isMixin`
133+
- `isCustomElement`
134+
- `isFunction`
135+
- `isVariable`
136+
137+
### CustomElement
138+
- `hasAttributes`
139+
- `hasCssParts`
140+
- `hasCssProperties`
141+
- `hasEvents`
142+
- `hasSlots`
143+
- `hasMethods`
144+
- `hasFields`
145+
- `hasMixins`
146+
147+
### ClassMember
148+
- `isField`
149+
- `isMethod`

packages/helpers/helpers.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ export function isMixin(item) {
3636
return item.kind === 'mixin';
3737
}
3838

39+
export function isCustomElement(item) {
40+
return item.customElement;
41+
}
42+
3943
export function isFunction(item) {
4044
return item.kind === 'function';
4145
}
@@ -49,6 +53,14 @@ export function hasAttributes(customElement) {
4953
return has(customElement?.attributes)
5054
}
5155

56+
export function hasCssParts(customElement) {
57+
return has(customElement?.cssParts)
58+
}
59+
60+
export function hasCssProperties(customElement) {
61+
return has(customElement?.cssProperties)
62+
}
63+
5264
export function hasEvents(customElement) {
5365
return has(customElement?.events)
5466
}

packages/helpers/index.js

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
11
import * as h from './helpers.js';
22

33
export class CustomElementsJson {
4-
schemaVersion;
5-
readme;
6-
modules;
7-
4+
_functions = new Map();
5+
_variables = new Map();
86
_classes = new Map();
97
_tagNames = new Map();
108
_definitions = new Map();
119
_mixins = new Map();
1210
_classLikes = new Map();
11+
_customElements = new Map();
1312

14-
constructor(
15-
{ schemaVersion, readme, modules } = {
16-
schemaVersion: '0.1.0',
17-
readme: '',
18-
modules: [],
19-
},
20-
) {
21-
this.schemaVersion = schemaVersion;
22-
this.readme = readme;
23-
this.modules = modules;
13+
constructor(cem) {
14+
for (const [key, value] of Object.entries(cem)) {
15+
this[key] = value;
16+
}
2417
this.init();
2518
}
2619

@@ -31,6 +24,18 @@ export class CustomElementsJson {
3124
this._classLikes.set(item.name, item);
3225
}
3326

27+
if(h.isFunction(item)) {
28+
this._functions.set(item.name, item);
29+
}
30+
31+
if(h.isVariable(item)) {
32+
this._variables.set(item.name, item);
33+
}
34+
35+
if(h.isCustomElement(item)) {
36+
this._customElements.set(item.name, item);
37+
}
38+
3439
if (h.isMixin(item)) {
3540
this._mixins.set(item.name, item);
3641
this._classLikes.set(item.name, item);
@@ -73,22 +78,31 @@ export class CustomElementsJson {
7378
return this._mixins.get(mixinName);
7479
}
7580

81+
/** Gets all customElements from declarations */
82+
getCustomElements() {
83+
return [...this._customElements.values()];
84+
}
85+
86+
/** Gets all functions from declarations */
87+
getFunctions() {
88+
return [...this._functions.values()];
89+
}
90+
91+
/** Gets all functions from declarations */
92+
getVariables() {
93+
return [...this._variables.values()];
94+
}
95+
7696
/** Gets all classes from declarations */
7797
getClasses() {
7898
return [...this._classes.values()];
7999
}
80100

81-
/** Gets registered custom elements, so elements that have customElements.define called, returns class including tagName */
82-
getTagNames() {
83-
return [...this._tagNames.values()];
84-
}
85-
86101
/** Gets all CustomElementDefinitions */
87102
getDefinitions() {
88103
return [...this._definitions.values()];
89104
}
90105

91-
92106
getMixins() {
93107
return [...this._mixins.values()];
94108
}

packages/helpers/package.json

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "helpers",
3-
"version": "1.0.0",
3+
"version": "0.0.1",
44
"description": "",
55
"main": "index.js",
66
"directories": {
@@ -11,7 +11,15 @@
1111
"test": "uvu test",
1212
"test:watch": "watchexec -w test npm test"
1313
},
14-
"keywords": [],
14+
"keywords": [
15+
"custom-elements",
16+
"custom-elements-json",
17+
"custom-elements-manifest",
18+
"customelements",
19+
"webcomponents",
20+
"customelementsjson",
21+
"customelementsmanifest"
22+
],
1523
"author": "",
1624
"license": "ISC",
1725
"devDependencies": {

packages/helpers/test/fixtures/classes.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616
"customElement": true,
1717
"tagName": "my-element"
1818
},
19+
{
20+
"kind": "class",
21+
"description": "",
22+
"name": "Foo"
23+
},
1924
{
2025
"kind": "class",
2126
"description": "",

packages/helpers/test/helpers.test.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
hasEvents,
1212
hasSlots,
1313
hasMethods,
14+
hasCssParts,
15+
hasCssProperties,
1416
hasFields,
1517
hasMixins,
1618
isField,
@@ -109,6 +111,8 @@ const fixtureF = {
109111
attributes: [{ name: 'foo' }],
110112
events: [{ name: 'foo', description: '', type: { text: '' } }],
111113
slots: [{ name: '' }],
114+
cssParts: [{}],
115+
cssProperties: [{}],
112116
members: [
113117
{ kind: 'field', name: '' },
114118
{ kind: 'method', name: '' },
@@ -132,6 +136,14 @@ helpers('hasEvents - false', () => {
132136
expect(hasEvents({ ...fixtureF, events: [] })).to.equal(false);
133137
});
134138

139+
helpers('hasCssParts - true', () => {
140+
expect(hasCssParts(fixtureF)).to.equal(true);
141+
});
142+
143+
helpers('hasCssProperties - true', () => {
144+
expect(hasCssProperties(fixtureF)).to.equal(true);
145+
});
146+
135147
helpers('hasSlots - true', () => {
136148
expect(hasSlots(fixtureF)).to.equal(true);
137149
});

packages/helpers/test/index.test.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,18 @@ test('getByClassName', () => {
2626

2727
test('getClasses - gets all classes', () => {
2828
const customElementsJson = new CustomElementsJson(classes);
29-
expect(customElementsJson.getClasses().length).to.equal(2);
29+
expect(customElementsJson.getClasses().length).to.equal(3);
3030
});
3131

3232
test('getDefinitions - gets all definitions', () => {
3333
const customElementsJson = new CustomElementsJson(classes);
3434
expect(customElementsJson.getDefinitions().length).to.equal(2);
3535
});
3636

37+
test('getCustomElements - gets all custom elements', () => {
38+
const customElementsJson = new CustomElementsJson(classes);
39+
expect(customElementsJson.getCustomElements().length).to.equal(2);
40+
});
3741

3842
test('getMixins - gets all mixins', () => {
3943
const customElementsJson = new CustomElementsJson(inheritanceMixinsSuperclass);

0 commit comments

Comments
 (0)