Skip to content

Commit 4469f46

Browse files
thepasslethepassle
authored
Merge pull request #25 from open-wc/feat/watch
feat: add --watch mode
2 parents 6fb11ef + d9630e3 commit 4469f46

File tree

6 files changed

+114
-131
lines changed

6 files changed

+114
-131
lines changed

‎packages/analyzer/README.md

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,17 @@ cem analyze
3434

3535
### Options
3636

37-
| Command/option | Type | Description | Example |
38-
| ---------------- | ---------- | ---------------------------------------------------- | --------------------- |
39-
| analyze | | Analyze your components | |
40-
| --globs | string[] | Globs to analyze | `--globs "foo.js"` |
41-
| --exclude | string[] | Globs to exclude | `--exclude "foo.js"` |
42-
| --dev | boolean | Enables extra logging for debugging | `--dev` |
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` |
37+
| Command/option | Type | Description | Example |
38+
| ---------------- | ---------- | ----------------------------------------------------------- | --------------------- |
39+
| analyze | | Analyze your components | |
40+
| --globs | string[] | Globs to analyze | `--globs "foo.js"` |
41+
| --exclude | string[] | Globs to exclude | `--exclude "foo.js"` |
42+
| --watch | boolean | Enables watch mode, generates a new manifest on file change | `--watch` |
43+
| --dev | boolean | Enables extra logging for debugging | `--dev` |
44+
| --litelement | boolean | Enable special handling for LitElement syntax | `--litelement` |
45+
| --fast | boolean | Enable special handling for FASTElement syntax | `--fast` |
46+
| --stencil | boolean | Enable special handling for Stencil syntax | `--stencil` |
47+
| --catalyst | boolean | Enable special handling for Catalyst syntax | `--catalyst` |
4748

4849
## Demo
4950

@@ -356,6 +357,7 @@ export default {
356357
globs: ['src/**/*.js'],
357358
exclude: ['src/foo.js'],
358359
dev: true,
360+
watch: true,
359361
plugins: [
360362
myAwesomePlugin()
361363
],
@@ -377,6 +379,7 @@ interface userConfigOptions {
377379
globs: string[],
378380
exclude: string[],
379381
dev: boolean,
382+
watch: boolean,
380383
plugins: Array<() => Plugin>,
381384
overrideModuleCreation: ({ts: TypeScript, globs: string[]}) => SourceFile[]
382385
}

‎packages/analyzer/custom-elements.json

Lines changed: 4 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,64 +7,16 @@
77
"path": "fixtures/-default/package/bar.js",
88
"declarations": [
99
{
10-
"kind": "class",
11-
"description": "",
12-
"name": "default",
13-
"cssParts": [
14-
{
15-
"name": "foo"
16-
}
17-
],
18-
"members": [
19-
{
20-
"kind": "field",
21-
"name": "propertyDecorator",
22-
"type": {
23-
"text": "string"
24-
},
25-
"default": "hi"
26-
},
27-
{
28-
"kind": "field",
29-
"name": "mobileopen",
30-
"privacy": "public",
31-
"default": "false"
32-
}
33-
],
34-
"attributes": [
35-
{
36-
"name": "propertyDecorator",
37-
"type": {
38-
"text": "string"
39-
},
40-
"default": "hi",
41-
"fieldName": "propertyDecorator"
42-
},
43-
{
44-
"name": "mobileopen",
45-
"fieldName": "mobileopen"
46-
}
47-
],
48-
"superclass": {
49-
"name": "LitElement"
50-
},
51-
"customElement": true
10+
"kind": "function",
11+
"name": "bar"
5212
}
5313
],
5414
"exports": [
5515
{
5616
"kind": "js",
57-
"name": "default",
58-
"declaration": {
59-
"name": "default",
60-
"module": "fixtures/-default/package/bar.js"
61-
}
62-
},
63-
{
64-
"kind": "custom-element-definition",
65-
"name": "top-bar",
17+
"name": "bar",
6618
"declaration": {
67-
"name": "TopBar",
19+
"name": "bar",
6820
"module": "fixtures/-default/package/bar.js"
6921
}
7022
}

‎packages/analyzer/index.js

Lines changed: 55 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import path from 'path';
55
import globby from 'globby';
66
import fs from 'fs';
77
import commandLineArgs from 'command-line-args';
8+
import chokidar from 'chokidar';
9+
import debounce from 'debounce';
810

911
import { create } from './src/create.js';
1012
import {
@@ -13,6 +15,7 @@ import {
1315
addFrameworkPlugins,
1416
addCustomElementsPropertyToPackageJson,
1517
mergeGlobsAndExcludes,
18+
timestamp,
1619
MENU
1720
} from './src/utils/cli.js';
1821

@@ -35,52 +38,68 @@ import {
3538
const merged = mergeGlobsAndExcludes(userConfig, cliConfig);
3639
const globs = await globby(merged);
3740

38-
/**
39-
* Create modules for `create()`
40-
*
41-
* By default, the analyzer doesn't actually compile a users source code with the TS compiler
42-
* API. This means that by default, the typeChecker is not available in plugins.
43-
*
44-
* If users want to use the typeChecker, they can do so by adding a `overrideModuleCreation` property
45-
* in their custom-elements-manifest.config.js. `overrideModuleCreation` is a function that should return
46-
* an array of sourceFiles.
47-
*/
48-
const modules = userConfig?.overrideModuleCreation
49-
? userConfig.overrideModuleCreation({ts, globs})
50-
: globs.map(glob => {
51-
const relativeModulePath = `./${path.relative(process.cwd(), glob)}`;
52-
const source = fs.readFileSync(relativeModulePath).toString();
41+
async function run() {
42+
/**
43+
* Create modules for `create()`
44+
*
45+
* By default, the analyzer doesn't actually compile a users source code with the TS compiler
46+
* API. This means that by default, the typeChecker is not available in plugins.
47+
*
48+
* If users want to use the typeChecker, they can do so by adding a `overrideModuleCreation` property
49+
* in their custom-elements-manifest.config.js. `overrideModuleCreation` is a function that should return
50+
* an array of sourceFiles.
51+
*/
52+
const modules = userConfig?.overrideModuleCreation
53+
? userConfig.overrideModuleCreation({ts, globs})
54+
: globs.map(glob => {
55+
const relativeModulePath = path.relative(process.cwd(), glob);
56+
const source = fs.readFileSync(relativeModulePath).toString();
57+
58+
return ts.createSourceFile(
59+
relativeModulePath,
60+
source,
61+
ts.ScriptTarget.ES2015,
62+
true,
63+
);
64+
});
65+
66+
let plugins = await addFrameworkPlugins(mergedOptions);
67+
plugins = [...plugins, ...(userConfig?.plugins || [])];
68+
69+
/**
70+
* Create the manifest
71+
*/
72+
const customElementsManifest = create({
73+
modules,
74+
plugins,
75+
dev: mergedOptions.dev
76+
});
5377

54-
return ts.createSourceFile(
55-
relativeModulePath,
56-
source,
57-
ts.ScriptTarget.ES2015,
58-
true,
59-
);
60-
});
78+
fs.writeFileSync(`${process.cwd()}${path.sep}custom-elements.json`, `${JSON.stringify(customElementsManifest, null, 2)}\n`);
79+
if(mergedOptions.dev) {
80+
console.log(JSON.stringify(customElementsManifest, null, 2));
81+
}
6182

62-
let plugins = await addFrameworkPlugins(mergedOptions);
63-
plugins = [...plugins, ...(userConfig?.plugins || [])];
83+
console.log(`[${timestamp()}] @custom-elements-manifest/analyzer: Created new manifest.`);
84+
}
85+
await run();
6486

6587
/**
66-
* Create the manifest
88+
* Watch mode
6789
*/
68-
const customElementsManifest = create({
69-
modules,
70-
plugins,
71-
dev: mergedOptions.dev
72-
});
73-
74-
fs.writeFileSync(`${process.cwd()}/custom-elements.json`, `${JSON.stringify(customElementsManifest, null, 2)}\n`);
75-
76-
if(mergedOptions.dev) {
77-
console.log(JSON.stringify(customElementsManifest, null, 2));
90+
if(mergedOptions.watch) {
91+
const fileWatcher = chokidar.watch(globs);
92+
93+
const onChange = debounce(run, 100);
94+
95+
fileWatcher.addListener('change', onChange);
96+
fileWatcher.addListener('unlink', onChange);
7897
}
7998

8099
try {
81100
addCustomElementsPropertyToPackageJson();
82101
} catch {
83-
console.log(`Could not add 'customElements' property to ${process.cwd()}/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`);
102+
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`);
84103
}
85104
} else {
86105
console.log(MENU);

‎packages/analyzer/package-lock.json

Lines changed: 19 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/analyzer/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@custom-elements-manifest/analyzer",
3-
"version": "0.2.4",
3+
"version": "0.3.0",
44
"description": "",
55
"license": "MIT",
66
"type": "module",
@@ -38,10 +38,12 @@
3838
],
3939
"dependencies": {
4040
"@web/config-loader": "^0.1.3",
41+
"chokidar": "^3.5.2",
4142
"command-line-args": "^5.1.1",
43+
"comment-parser": "^1.1.5",
4244
"custom-elements-manifest": "^1.0.0",
45+
"debounce": "^1.2.1",
4346
"globby": "^11.0.1",
44-
"comment-parser": "^1.1.5",
4547
"typescript": "^4.3.2"
4648
},
4749
"devDependencies": {

0 commit comments

Comments
 (0)