Skip to content

Commit 7548c1e

Browse files
authored
Fix/catalyst (open-wc#188)
* fix: catalyst * chore: fix open-wc#163 * fix: use dasherize from catalyst * chore: browser build
1 parent 004caf9 commit 7548c1e

File tree

28 files changed

+2605
-3175
lines changed

28 files changed

+2605
-3175
lines changed

.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
"titleBar.inactiveForeground": "#15202b99",
1717
"sash.hoverBorder": "#fbd5de",
1818
"statusBarItem.remoteBackground": "#f6a7ba",
19-
"statusBarItem.remoteForeground": "#15202b"
19+
"statusBarItem.remoteForeground": "#15202b",
20+
"commandCenter.border": "#15202b99"
2021
},
2122
"peacock.color": "#f6a7ba"
2223
}

docs/analyzer/config.md

+17-16
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,23 @@
22

33
## CLI Options
44

5-
| Command/option | Type | Description | Example |
6-
| ---------------- | ---------- | ----------------------------------------------------------- | ------------------------------------------------------- |
7-
| analyze | | Analyze your components | |
8-
| --config | string | Path to custom config location | `--config "../custom-elements-manifest.config.js"` |
9-
| --globs | string[] | Globs to analyze | `--globs "foo.js"` |
10-
| --exclude | string[] | Globs to exclude | `--exclude "foo.js"` |
11-
| --outdir | string | Directory to output the Manifest to | `--outdir dist` |
12-
| --dependencies | boolean | Include third party custom elements manifests | `--dependencies` |
13-
| --packagejson | boolean | Output CEM path to `package.json`, defaults to true | `--packagejson` |
14-
| --watch | boolean | Enables watch mode, generates a new manifest on file change | `--watch` |
15-
| --dev | boolean | Enables extra logging for debugging | `--dev` |
16-
| --quiet | boolean | Hides all logging | `--quiet` |
17-
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
18-
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
19-
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
20-
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |
5+
| Command/option | Type | Description | Example |
6+
| ------------------ | ---------- | ----------------------------------------------------------- | ----------------------------------------------------- |
7+
| analyze | | Analyze your components | |
8+
| --config | string | Path to custom config location | `--config "../custom-elements-manifest.config.js"` |
9+
| --globs | string[] | Globs to analyze | `--globs "foo.js"` |
10+
| --exclude | string[] | Globs to exclude | `--exclude "foo.js"` |
11+
| --outdir | string | Directory to output the Manifest to | `--outdir dist` |
12+
| --dependencies | boolean | Include third party custom elements manifests | `--dependencies` |
13+
| --packagejson | boolean | Output CEM path to `package.json`, defaults to true | `--packagejson` |
14+
| --watch | boolean | Enables watch mode, generates a new manifest on file change | `--watch` |
15+
| --dev | boolean | Enables extra logging for debugging | `--dev` |
16+
| --quiet | boolean | Hides all logging | `--quiet` |
17+
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
18+
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
19+
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
20+
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |
21+
| --catalyst-major-2 | boolean | Enable special handling for Catalyst syntax ^2.0.0 | `--catalyst-major-2` |
2122

2223
## Config File
2324

docs/analyzer/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ cem analyze
120120

121121
### Support
122122

123-
`@custom-elements-manifest/analyzer` by default supports standard JavaScript, and _vanilla_ web components. Dedicated web component libraries can be supported through the use of plugins. Currently, support for LitElement, Stencil and Catalyst is provided in this project via plugins. You can enable them by using the CLI flags `--litelement`, `--fast`, `--stencil` and `--catalyst` respectively, or loading the plugin via your `custom-elements-manifest.config.js`.
123+
`@custom-elements-manifest/analyzer` by default supports standard JavaScript, and _vanilla_ web components. Dedicated web component libraries can be supported through the use of plugins. Currently, support for LitElement, Stencil and Catalyst is provided in this project via plugins. You can enable them by using the CLI flags `--litelement`, `--fast`, `--stencil`, `--catalyst` and `--catalyst` respectively, or loading the plugin via your `custom-elements-manifest.config.js`.
124124

125125
**TL;DR:**
126126
- JavaScript

docs/blog/intro/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ npx custom-elements-json analyze
176176
> ✨ Or try it out in the [online playground](https://custom-elements-manifest.netlify.app/)! ✨
177177
178178

179-
`@custom-elements-manifest/analyzer` by default supports standard JavaScript, and _vanilla_ web components. Dedicated web component libraries can be supported through the use of plugins. Currently, support for LitElement, Fast, Stencil and Catalyst is provided in this project via plugins. You can enable them by using the CLI flags `--litelement`, `--fast`, `--stencil` and `--catalyst` respectively, or loading the plugin via your `custom-elements-manifest.config.js`.
179+
`@custom-elements-manifest/analyzer` by default supports standard JavaScript, and _vanilla_ web components. Dedicated web component libraries can be supported through the use of plugins. Currently, support for LitElement, Fast, Stencil and Catalyst is provided in this project via plugins. You can enable them by using the CLI flags `--litelement`, `--fast`, `--stencil`, `--catalyst` and `--catalyst-major-2` respectively, or loading the plugin via your `custom-elements-manifest.config.js`.
180180

181181
**TL;DR:**
182182
- JavaScript

packages/analyzer/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## Release 0.6.5
2+
- Fix attr decorator for Catalyst
3+
- Add catalyst-major-2
4+
15
## Release 0.6.4
26
- Reexport TS for programmatic usage/module generation
37

packages/analyzer/README.md

+17-16
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,20 @@ cem analyze
2828

2929
## Options
3030

31-
| Command/option | Type | Description | Example |
32-
| ---------------- | ---------- | ----------------------------------------------------------- | ------------------------------------------------------- |
33-
| analyze | | Analyze your components | |
34-
| --config | string | Path to custom config location | `--config "../custom-elements-manifest.config.js"` |
35-
| --globs | string[] | Globs to analyze | `--globs "foo.js"` |
36-
| --exclude | string[] | Globs to exclude | `--exclude "foo.js"` |
37-
| --outdir | string | Directory to output the Manifest to | `--outdir dist` |
38-
| --dependencies | boolean | Include third party custom elements manifests | `--dependencies` |
39-
| --packagejson | boolean | Output CEM path to `package.json`, defaults to true | `--packagejson` |
40-
| --watch | boolean | Enables watch mode, generates a new manifest on file change | `--watch` |
41-
| --dev | boolean | Enables extra logging for debugging | `--dev` |
42-
| --quiet | boolean | Hides all logging | `--quiet` |
43-
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
44-
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
45-
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
46-
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |
31+
| Command/option | Type | Description | Example |
32+
| ------------------ | ---------- | ----------------------------------------------------------- | ----------------------------------------------------- |
33+
| analyze | | Analyze your components | |
34+
| --config | string | Path to custom config location | `--config "../custom-elements-manifest.config.js"` |
35+
| --globs | string[] | Globs to analyze | `--globs "foo.js"` |
36+
| --exclude | string[] | Globs to exclude | `--exclude "foo.js"` |
37+
| --outdir | string | Directory to output the Manifest to | `--outdir dist` |
38+
| --dependencies | boolean | Include third party custom elements manifests | `--dependencies` |
39+
| --packagejson | boolean | Output CEM path to `package.json`, defaults to true | `--packagejson` |
40+
| --watch | boolean | Enables watch mode, generates a new manifest on file change | `--watch` |
41+
| --dev | boolean | Enables extra logging for debugging | `--dev` |
42+
| --quiet | boolean | Hides all logging | `--quiet` |
43+
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
44+
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
45+
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
46+
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |
47+
| --catalyst-major-2 | boolean | Enable special handling for Catalyst syntax ^2.0.0 | `--catalyst-major-2` |

packages/analyzer/browser/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/analyzer/cli.js

-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export async function cli({ argv = process.argv, cwd = process.cwd(), noWrite }
4040
const mergedOptions = { ...DEFAULTS, ...userConfig, ...cliConfig };
4141
const merged = mergeGlobsAndExcludes(DEFAULTS, userConfig, cliConfig);
4242
const globs = await globby(merged, { cwd });
43-
4443
async function run() {
4544
const modules = userConfig?.overrideModuleCreation
4645
? userConfig.overrideModuleCreation({ ts, globs })

packages/analyzer/custom-elements-manifest.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
let typeChecker;
2020

2121
export default {
22-
globs: ['fixtures/-default/package/**/*.{js,ts}'],
22+
globs: ['fixtures/01-class/-default/package/**/*.{js,ts}'],
2323
exclude: [],
2424
dependencies: true,
2525
dev: false,

packages/analyzer/custom-elements.json

+35-23
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,58 @@
44
"modules": [
55
{
66
"kind": "javascript-module",
7-
"path": "fixtures/-default/package/bar.js",
7+
"path": "fixtures/01-class/-default/package/bar.js",
88
"declarations": [
99
{
1010
"kind": "class",
1111
"description": "",
12-
"name": "MyElementA",
13-
"mixins": [
12+
"name": "HelloWorldElement",
13+
"members": [
14+
{
15+
"kind": "field",
16+
"name": "fooBar",
17+
"type": {
18+
"text": "string"
19+
},
20+
"default": "'hello'"
21+
},
1422
{
15-
"name": "MyMixin",
16-
"module": "fixtures/-default/package/bar.js"
23+
"kind": "field",
24+
"name": "bar"
1725
}
1826
],
19-
"superclass": {
20-
"name": "HTMLElement"
21-
},
22-
"tagName": "my-mixin-element-a",
23-
"customElement": true,
24-
"members": [
27+
"attributes": [
2528
{
26-
"kind": "field",
27-
"name": "foo",
29+
"name": "data-foo-bar",
2830
"type": {
29-
"text": "number"
31+
"text": "string"
3032
},
31-
"default": "1",
32-
"inheritedFrom": {
33-
"name": "MyMixin",
34-
"module": "fixtures/-default/package/bar.js"
35-
}
33+
"default": "'hello'",
34+
"fieldName": "fooBar"
3635
}
37-
]
36+
],
37+
"superclass": {
38+
"name": "HTMLElement"
39+
},
40+
"tagName": "hello-world",
41+
"customElement": true
3842
}
3943
],
4044
"exports": [
45+
{
46+
"kind": "js",
47+
"name": "HelloWorldElement",
48+
"declaration": {
49+
"name": "HelloWorldElement",
50+
"module": "fixtures/01-class/-default/package/bar.js"
51+
}
52+
},
4153
{
4254
"kind": "custom-element-definition",
43-
"name": "my-mixin-element-a",
55+
"name": "hello-world",
4456
"declaration": {
45-
"name": "MyElementA",
46-
"module": "fixtures/-default/package/bar.js"
57+
"name": "HelloWorldElement",
58+
"module": "fixtures/01-class/-default/package/bar.js"
4759
}
4860
}
4961
]
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
class MyElementA extends MyMixin(HTMLElement){}
1+
import { controller, attr } from '@github/catalyst'
22

3-
function MyMixin(superClass){
4-
return class extends superClass {
5-
foo = 1;
6-
}
7-
}
3+
@controller
4+
export class HelloWorldElement extends HTMLElement {
5+
@attr fooBar = 'hello'
86

9-
customElements.define('my-mixin-element-a', MyElementA);
7+
bar;
8+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"schemaVersion": "1.0.0",
3+
"readme": "",
4+
"modules": [
5+
{
6+
"kind": "javascript-module",
7+
"path": "my-element.js",
8+
"declarations": [
9+
{
10+
"kind": "class",
11+
"description": "",
12+
"name": "HelloWorldElement",
13+
"members": [
14+
{
15+
"kind": "field",
16+
"name": "fooBar",
17+
"default": "'hello'",
18+
"type": {
19+
"text": "string"
20+
}
21+
},
22+
{
23+
"kind": "field",
24+
"name": "bar"
25+
}
26+
],
27+
"attributes": [
28+
{
29+
"name": "foo-bar",
30+
"default": "'hello'",
31+
"fieldName": "fooBar",
32+
"type": {
33+
"text": "string"
34+
}
35+
}
36+
],
37+
"superclass": {
38+
"name": "HTMLElement"
39+
},
40+
"tagName": "hello-world",
41+
"customElement": true
42+
}
43+
],
44+
"exports": [
45+
{
46+
"kind": "custom-element-definition",
47+
"name": "hello-world",
48+
"declaration": {
49+
"name": "HelloWorldElement",
50+
"module": "my-element.js"
51+
}
52+
}
53+
]
54+
}
55+
]
56+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"schemaVersion": "1.0.0",
3+
"readme": "",
4+
"modules": [
5+
{
6+
"kind": "javascript-module",
7+
"path": "my-element.js",
8+
"declarations": [
9+
{
10+
"kind": "class",
11+
"description": "",
12+
"name": "HelloWorldElement",
13+
"members": [
14+
{
15+
"kind": "field",
16+
"name": "fooBar",
17+
"type": {
18+
"text": "string"
19+
},
20+
"default": "'hello'"
21+
},
22+
{
23+
"kind": "field",
24+
"name": "bar"
25+
}
26+
],
27+
"attributes": [
28+
{
29+
"name": "foo-bar",
30+
"type": {
31+
"text": "string"
32+
},
33+
"default": "'hello'",
34+
"fieldName": "fooBar"
35+
}
36+
],
37+
"superclass": {
38+
"name": "HTMLElement"
39+
},
40+
"tagName": "hello-world",
41+
"customElement": true
42+
}
43+
],
44+
"exports": [
45+
{
46+
"kind": "custom-element-definition",
47+
"name": "hello-world",
48+
"declaration": {
49+
"name": "HelloWorldElement",
50+
"module": "my-element.js"
51+
}
52+
}
53+
]
54+
}
55+
]
56+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { catalystPlugin2 } from '../../../../src/features/framework-plugins/catalyst-major-2/catalyst.js';
2+
3+
export default {
4+
plugins: [...catalystPlugin2()]
5+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { controller, attr } from '@github/catalyst'
2+
3+
@controller
4+
class HelloWorldElement extends HTMLElement {
5+
@attr fooBar = 'hello'
6+
7+
bar;
8+
}

packages/analyzer/fixtures/10-plugin-catalyst/01-basic/fixture/custom-elements.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"members": [
1414
{
1515
"kind": "field",
16-
"name": "foo",
16+
"name": "fooBar",
1717
"default": "'hello'",
1818
"type": {
1919
"text": "string"
@@ -26,9 +26,9 @@
2626
],
2727
"attributes": [
2828
{
29-
"name": "foo",
29+
"name": "data-foo-bar",
3030
"default": "'hello'",
31-
"fieldName": "foo",
31+
"fieldName": "fooBar",
3232
"type": {
3333
"text": "string"
3434
}

0 commit comments

Comments
 (0)