Skip to content

Commit a893620

Browse files
Pascal Schilptlouisse
Pascal Schilp
authored and
tlouisse
committedMay 16, 2022
feat: third party cem support
1 parent 3b79734 commit a893620

File tree

21 files changed

+362
-203
lines changed

21 files changed

+362
-203
lines changed
 

‎.vscode/settings.json

-3
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@
1414
"titleBar.activeForeground": "#15202b",
1515
"titleBar.inactiveBackground": "#f6a7ba99",
1616
"titleBar.inactiveForeground": "#15202b99",
17-
"editorGroup.border": "#fbd5de",
18-
"panel.border": "#fbd5de",
1917
"sash.hoverBorder": "#fbd5de",
20-
"sideBar.border": "#fbd5de",
2118
"statusBarItem.remoteBackground": "#f6a7ba",
2219
"statusBarItem.remoteForeground": "#15202b"
2320
},

‎docs/analyzer/config.md

+21-15
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@
55
| Command/option | Type | Description | Example |
66
| ---------------- | ---------- | ----------------------------------------------------------- | ------------------------------------------------------- |
77
| 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-
| --watch | boolean | Enables watch mode, generates a new manifest on file change | \`--watch\` |
13-
| --dev | boolean | Enables extra logging for debugging | \`--dev\` |
14-
| --litelement | boolean | Enable special handling for LitElement syntax | \`--litelement\` |
15-
| --fast | boolean | Enable special handling for FASTElement syntax | \`--fast\` |
16-
| --stencil | boolean | Enable special handling for Stencil syntax | \`--stencil\` |
17-
| --catalyst | boolean | Enable special handling for Catalyst syntax | \`--catalyst\` |
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+
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
17+
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
18+
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
19+
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |
1820

1921
## Config File
2022

@@ -35,6 +37,10 @@ export default {
3537
dev: true,
3638
/** Run in watch mode, runs on file changes */
3739
watch: true,
40+
/** Include third party custom elements manifests */
41+
dependencies: true,
42+
/** Output CEM path to `package.json`, defaults to true */
43+
packagejson: false,
3844
/** Enable special handling for litelement */
3945
litelement: true,
4046
/** Enable special handling for catalyst */
@@ -67,6 +73,8 @@ interface userConfigOptions {
6773
outdir: string,
6874
dev: boolean,
6975
watch: boolean,
76+
dependencies: boolean,
77+
packagejson: boolean,
7078

7179
litelement: boolean,
7280
catalyst: boolean,
@@ -79,10 +87,8 @@ interface userConfigOptions {
7987

8088
```
8189

82-
### Custom config location
90+
### Analyzing dependencies
8391

84-
Using the `--config` flag in the CLI you can supply a custom path to your configuration file as follows:
92+
By default, the analyzer doesn't analyze any code inside `node_modules/`. This has several reasons; you dont want all of `lodash` to accidentally get analyzed and output in your manifest, but also, we don't actually know which dependencies your project uses _until_ we're analyzing the code, by which time glob collection and compilation has already happened.
8593

86-
```bash
87-
cem analyze --config "../configs/custom-elements-manifest.js"
88-
```
94+
If you want to include metadata about third party packages in your `custom-elements.json` you can enable the `--dependencies` flag. This will try to find your dependencies' `custom-elements.json` files, by either looking at the `customElements` field in your `package.json`, or the `./customElements` field in the packages' exports map if available. If a `custom-elements.json` is found, the output will be included in your `custom-elements.json`.

‎package.json

-2
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,10 @@
2929
"esbuild": "^0.12.15",
3030
"globby": "^12.0.2",
3131
"nodemon": "^2.0.13",
32-
"npm-run-all": "^4.1.5",
3332
"request": "^2.88.2",
3433
"rocket-preset-code-tabs": "^0.2.2",
3534
"rollup": "^2.52.8",
3635
"rollup-plugin-terser": "^7.0.2",
37-
"uvu": "^0.5.1",
3836
"watchexec-bin": "^1.0.0"
3937
},
4038
"workspaces": [

‎packages/analyzer/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## Release 0.6.0
2+
- Allow inclusion of third party `custom-elements.json`s from `node_modules`
3+
- If a package has an export map, add the `./customElements` key in the export map
4+
- This feature can be disabled with the `--packagejson` flag, but make sure to include the path to the `custom-elements.json` in your `package.json` so that tools can find it.
5+
16
## Release 0.5.7
27
- Only remove unexported declarations _after_ applying inheritance. Usecase as described in [#145](https://github.com/open-wc/custom-elements-manifest/issues/145).
38
- Log analyzer version number to default CLI message. Via [#144](https://github.com/open-wc/custom-elements-manifest/pull/144)

‎packages/analyzer/README.md

+15-13
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,18 @@ 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-
| --watch | boolean | Enables watch mode, generates a new manifest on file change | `--watch` |
39-
| --dev | boolean | Enables extra logging for debugging | `--dev` |
40-
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
41-
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
42-
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
43-
| --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+
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
43+
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
44+
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
45+
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |

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

+2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ let typeChecker;
2121
export default {
2222
globs: ['fixtures/-default/package/**/*.{js,ts}'],
2323
exclude: [],
24+
dependencies: true,
2425
dev: false,
26+
packagejson: true,
2527
plugins: [
2628
// myPlugin(typeChecker)
2729
/** myAwesomePlugin() */

‎packages/analyzer/custom-elements.json

+39
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,45 @@
4747
}
4848
}
4949
]
50+
},
51+
{
52+
"kind": "javascript-module",
53+
"path": "fixtures/-default/package/node_modules/foo/index.js",
54+
"declarations": [
55+
{
56+
"kind": "class",
57+
"description": "",
58+
"name": "SuperFoo",
59+
"members": [
60+
{
61+
"kind": "method",
62+
"name": "superMethod"
63+
}
64+
],
65+
"events": [
66+
{
67+
"name": "super-event",
68+
"type": {
69+
"text": "CustomEvent"
70+
}
71+
}
72+
],
73+
"superclass": {
74+
"name": "HTMLElement"
75+
},
76+
"customElement": true
77+
}
78+
],
79+
"exports": [
80+
{
81+
"kind": "js",
82+
"name": "SuperFoo",
83+
"declaration": {
84+
"name": "SuperFoo",
85+
"module": "fixtures/-default/package/node_modules/foo/index.js"
86+
}
87+
}
88+
]
5089
}
5190
]
5291
}

‎packages/analyzer/fixtures/01-class/-default/package/bar.js

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
class MyElementA extends MyMixin(HTMLElement){}
2-
3-
function MyMixin(superClass){
4-
return class extends superClass {
5-
foo = 1;
6-
}
7-
}
8-
9-
customElements.define('my-mixin-element-a', MyElementA);
1+
import { bla } from '@foo/bar';
2+
import { bla2 } from '@foo/bar/baz/asd.js';
3+
import { foo } from 'bar';

‎packages/analyzer/index.js

+43-28
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
DEFAULTS,
2020
MENU
2121
} from './src/utils/cli.js';
22+
import { findDependencies } from './src/utils/find-dependencies.js';
2223

2324
(async () => {
2425
const mainDefinitions = [{ name: 'command', defaultOption: true }];
@@ -42,17 +43,8 @@ import {
4243
const globs = await globby(merged);
4344

4445
async function run() {
45-
/**
46-
* Create modules for `create()`
47-
*
48-
* By default, the analyzer doesn't actually compile a users source code with the TS compiler
49-
* API. This means that by default, the typeChecker is not available in plugins.
50-
*
51-
* If users want to use the typeChecker, they can do so by adding a `overrideModuleCreation` property
52-
* in their custom-elements-manifest.config.js. `overrideModuleCreation` is a function that should return
53-
* an array of sourceFiles.
54-
*/
55-
const modules = userConfig?.overrideModuleCreation
46+
47+
const modules = userConfig?.overrideModuleCreation
5648
? userConfig.overrideModuleCreation({ts, globs})
5749
: globs.map(glob => {
5850
const relativeModulePath = path.relative(process.cwd(), glob);
@@ -66,28 +58,49 @@ import {
6658
);
6759
});
6860

61+
62+
/**
63+
* @TODO
64+
* filter out thirdPartyCEMs that are not dependencies
65+
* [{isDependency: true, name: 1}, {isDependency: true, name: 2}, {name: 3}].filter(({isDependency}) => !isDependency)
66+
*/
67+
let thirdPartyCEMs = [];
68+
if(mergedOptions?.dependencies) {
69+
try {
70+
thirdPartyCEMs = await findDependencies(globs);
71+
/** Flatten found CEMs, and mark them as being a dependency so we can remove them later */
72+
thirdPartyCEMs
73+
.flatMap(({modules}) => modules)
74+
.map(mod => ({...mod, isDependency: true}));
75+
76+
if(mergedOptions.dev) console.log(thirdPartyCEMs);
77+
} catch(e) {
78+
if(mergedOptions.dev) console.log(`Failed to add third party CEMs. \n\n${e.stack}`);
79+
}
80+
}
81+
6982
let plugins = await addFrameworkPlugins(mergedOptions);
7083
plugins = [...plugins, ...(userConfig?.plugins || [])];
7184

7285
/**
7386
* Create the manifest
7487
*/
75-
const customElementsManifest = create({
76-
modules,
77-
plugins,
78-
dev: mergedOptions.dev
79-
});
80-
81-
const outdir = path.join(process.cwd(), mergedOptions.outdir);
82-
if (!fs.existsSync(outdir)){
83-
fs.mkdirSync(outdir, { recursive: true });
84-
}
85-
fs.writeFileSync(path.join(outdir, 'custom-elements.json'), `${JSON.stringify(customElementsManifest, null, 2)}\n`);
86-
if(mergedOptions.dev) {
87-
console.log(JSON.stringify(customElementsManifest, null, 2));
88-
}
89-
90-
console.log(`[${timestamp()}] @custom-elements-manifest/analyzer: Created new manifest.`);
88+
// const customElementsManifest = create({
89+
// modules,
90+
// plugins,
91+
// dev: mergedOptions.dev
92+
// });
93+
94+
// const outdir = path.join(process.cwd(), mergedOptions.outdir);
95+
// if (!fs.existsSync(outdir)){
96+
// fs.mkdirSync(outdir, { recursive: true });
97+
// }
98+
// fs.writeFileSync(path.join(outdir, 'custom-elements.json'), `${JSON.stringify(customElementsManifest, null, 2)}\n`);
99+
// if(mergedOptions.dev) {
100+
// console.log(JSON.stringify(customElementsManifest, null, 2));
101+
// }
102+
103+
// console.log(`[${timestamp()}] @custom-elements-manifest/analyzer: Created new manifest.`);
91104
}
92105
await run();
93106

@@ -104,7 +117,9 @@ import {
104117
}
105118

106119
try {
107-
addCustomElementsPropertyToPackageJson(mergedOptions.outdir);
120+
if(mergedOptions.packagejson) {
121+
addCustomElementsPropertyToPackageJson(mergedOptions.outdir);
122+
}
108123
} catch {
109124
console.log(`Could not add 'customElements' property to ${process.cwd()}${path.sep}package.json. \nAdding this property helps tooling locate your Custom Elements Manifest. Please consider adding it yourself, or file an issue if you think this is a bug.\nhttps://www.github.com/open-wc/custom-elements-manifest`);
110125
}

‎packages/analyzer/package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@custom-elements-manifest/analyzer",
3-
"version": "0.5.7",
3+
"version": "0.6.0",
44
"description": "",
55
"license": "MIT",
66
"type": "module",
@@ -44,6 +44,7 @@
4444
"comment-parser": "1.2.4",
4545
"custom-elements-manifest": "1.0.0",
4646
"debounce": "1.2.1",
47+
"@custom-elements-manifest/find-dependencies": "^0.0.4",
4748
"globby": "11.0.4",
4849
"typescript": "~4.3.2"
4950
},
@@ -53,5 +54,5 @@
5354
"Benny Powers <web@bennypowers.com>",
5455
"Matias Huhta <huhta.matias@gmail.com>"
5556
],
56-
"customElements": "custom-elements.json"
57+
"customElements": "./custom-elements.json"
5758
}

0 commit comments

Comments
 (0)
Please sign in to comment.