Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Web-Types generation support #239

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3e9501b
initial work on web-types transformer
marcobeierer Nov 10, 2021
9009b12
WebTypes in progress
jpradelle Jan 13, 2022
a738188
WebTypes: Add configuration, add CSS properties
jpradelle Jan 14, 2022
cf41546
web-types transformation improvements
jpradelle Jan 18, 2022
22b1505
Add web-types documentation
jpradelle Jan 18, 2022
11f1b32
Fix readme webtype section position
jpradelle Jan 19, 2022
b654d69
webtypes: add priority, fix boolean attributes
jpradelle Jan 19, 2022
30d4582
Add web-types package keyword
jpradelle Jan 19, 2022
71869be
Code cleanup
jpradelle Jan 20, 2022
f6ab6cf
Update webtypes configuration to support package.json configuration.
jpradelle Aug 26, 2022
92427fe
Webtypes PR fixes
jpradelle Aug 26, 2022
fc64397
webtypes: fix boolean value requirement issue
jpradelle Aug 29, 2022
d92fc8b
Webtypes: move pathAsAbsolute configuration from global configuration…
jpradelle Aug 29, 2022
61a3515
Webtypes: add tests
jpradelle Aug 30, 2022
eb95198
Merge branch 'master' of https://github.com/runem/web-component-analy…
jpradelle Aug 30, 2022
3c2b4c8
webtypes: add enum support
jpradelle Aug 30, 2022
420be56
webtypes: update documentation to use '@web-types/lit' package for li…
jpradelle Sep 2, 2022
d687d81
Fix README.md
jpradelle Sep 20, 2022
3480a94
Webtypes: add source field for component properties and attributes
jpradelle Apr 12, 2023
aed0927
Merge branch 'master' of https://github.com/runem/web-component-analy…
jpradelle Oct 19, 2023
67cd427
webtypes: add slots support
jpradelle Oct 19, 2023
d483b1a
webtypes: add css parts support
jpradelle Oct 19, 2023
ae6c302
Webtypes: add default value of CSS properties in description
jpradelle Oct 20, 2023
1a83102
webtypes: fix CSS test
jpradelle Oct 25, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ node_modules
dist
lib
*.tgz
yarn.lock

551 changes: 289 additions & 262 deletions README.md

Large diffs are not rendered by default.

152 changes: 152 additions & 0 deletions doc/web-types.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
# Web-types

## web-component-analyzer usage

### With package.json configuration

You can add a `wca` section in your `package.json` to configure wca for web-types build.

```json
"wca": {
"webtypesConfig": {
"name": "your-project-name",
"version": "0.0.1",
"framework": "lit",
"description-markup": "markdown"
}
}
```

To run wca then use command:

```bash
wca analyze src --format webtypes --outFile web-types-custom.json
```

If you run `wca` from project npm `scripts` section of `package.json`, you can omit `name` and `version` property
in `webtypesConfig`, this will take package `name` and `version` by default.

### With command line only

You can also avoid updating `package.json` `wca` section and use only command line by providing a json configuration to `--webtypesConfig` argument:

```bash
wca analyze src --format webtypes --outFile web-types-custom.json --webtypesConfig='{"name": "your-project-name", "version": "0.0.1", "framework": "lit", "description-markup": "markdown"}'
```

If you run `wca` from project npm `scripts` section of `package.json`, you can omit `name` and `version` property
in `webtypesConfig`, this will take package `name` and `version` by default.

## Project setup

### For Lit

Generated web-types are working with the generic `lit-web-types` library. You need to add it on your project.

<!-- prettier-ignore -->
```bash
npm i lit-web-types -D
```

Add `wca` section in your `package.json`:

```json
"wca": {
"webtypesConfig": {
"framework": "lit",
"description-markup": "markdown"
}
}
```

Working with lit, `framework` must have `lit` value. See [Web types config parameters](#web-types-config-parameters) documentation section for more info.

Add `scripts` section in your `package.json`:

```json
"scripts": {
"web-types": "wca analyze src --format webtypes --outFile web-types.json"
}
```

Generate your components descriptions with wca

<!-- prettier-ignore -->
```bash
npm web-types
```

If your web-types is not named `web-types.json` and placed at root of your project, you need to declare it in your `package.json`

```json
"web-types": [
"..../web-types-custom.json"
]
```

After the first setup on Intellij, IDE restart might be needed to enable components completion.

### For Polymer

Generated web-types are working with the generic `polymer-web-types` library. You need to add it on your project.

<!-- prettier-ignore -->
```bash
npm i polymer-web-types -D
```

Add `wca` section in your `package.json`:

```json
"wca": {
"webtypesConfig": {
"framework": "@polymer/polymer",
"description-markup": "markdown"
}
}
```

Working with lit, `framework` must have `@polymer/polymer` value. See [Web types config parameters](#web-types-config-parameters) documentation section for more info.

Add `scripts` section in your `package.json`:

```json
"scripts": {
"web-types": "wca analyze src --format webtypes --outFile web-types.json"
}
```

Generate your components descriptions with wca

<!-- prettier-ignore -->
```bash
npm web-types
```

If your web-types is not named `web-types.json` and placed at root of your project, you need to declare it in your `package.json`

```json
"web-types": [
"..../web-types-custom.json"
]
```

After the first setup on Intellij, IDE restart might be needed to enable components completion.

## Web types config parameters

`webtypesConfig` parameter is a json object containing web-types file root parameter.

Available parameters:

| Name | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------- |
| name | Name of library |
| version | Version of the library, for which Web-Types are provided |
| framework | See [http://json.schemastore.org/web-types](http://json.schemastore.org/web-types) framework section |
| js-types-syntax | See [http://json.schemastore.org/web-types](http://json.schemastore.org/web-types) js-types-syntax section |
| description-markup | See [http://json.schemastore.org/web-types](http://json.schemastore.org/web-types) description-markup section |
| framework-config | See [http://json.schemastore.org/web-types](http://json.schemastore.org/web-types) framework-config section |
| default-icon | See [http://json.schemastore.org/web-types](http://json.schemastore.org/web-types) default-icon section |

See [web-types project:](https://github.com/JetBrains/web-types) for more info.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
"keywords": [
"web components",
"web",
"components"
"components",
"web-types"
],
"contributors": [
{
Expand Down
36 changes: 34 additions & 2 deletions src/cli/analyze/analyze-cli-command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const analyzeCliCommand: CliCommand = async (config: AnalyzerCliConfig):
const inputGlobs = config.glob || [];

// Log warning for experimental json format
if (config.format === "json" || config.format === "json2" || config.outFile?.endsWith(".json")) {
if (config.format === "json" || config.format === "json2" || (config.outFile?.endsWith(".json") && config.format !== "webtypes")) {
log(
`
!!!!!!!!!!!!! WARNING !!!!!!!!!!!!!
Expand All @@ -37,6 +37,33 @@ Please follow and contribute to the discussion at:
);
}

if (config.format === "webtypes") {
// Allow object being passed as JSON from command line
if (typeof config.webtypesConfig === "string") {
config.webtypesConfig = JSON.parse(config.webtypesConfig);
}

if (!config?.webtypesConfig) throw makeCliError("Missing webtypes-config configuration");

if (!config.webtypesConfig.name) {
// Take package name if ran from npm script
if (process.env.npm_package_name) {
config.webtypesConfig.name = process.env.npm_package_name;
} else {
throw makeCliError('Missing webtypes-config "name" property');
}
}

if (!config.webtypesConfig.version) {
// Take package version if ran from npm script
if (process.env.npm_package_version) {
config.webtypesConfig.version = process.env.npm_package_version;
} else {
throw makeCliError('Missing webtypes-config "version" property');
}
}
}

// If no "out" is specified, output to console
const outStrategy: OutStrategy = (() => {
if (config.outDir == null && config.outFile == null && config.outFiles == null) {
Expand Down Expand Up @@ -122,8 +149,12 @@ function transformResults(results: AnalyzerResult[] | AnalyzerResult, program: P
inlineTypes: config.inlineTypes ?? false,
visibility: config.visibility ?? "public",
markdown: config.markdown,
cwd: config.cwd
cwd: config.cwd,
pathAsAbsolute: config.pathAsAbsolute
};
if (format == "webtypes") {
transformerConfig.webTypes = config.webtypesConfig;
}

return transformAnalyzerResult(format, results, program, transformerConfig);
}
Expand Down Expand Up @@ -227,6 +258,7 @@ function formatToExtension(kind: TransformerKind): string {
switch (kind) {
case "json":
case "vscode":
case "webtypes":
return ".json";
case "md":
case "markdown":
Expand Down
4 changes: 4 additions & 0 deletions src/cli/analyzer-cli-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as tsModule from "typescript";
import { ComponentFeature } from "../analyze/types/features/component-feature";
import { VisibilityKind } from "../analyze/types/visibility-kind";
import { TransformerKind } from "../transformers/transformer-kind";
import { WebTypesTransformerConfig } from "../transformers";

export interface AnalyzerCliConfig {
glob?: string[];
Expand Down Expand Up @@ -30,4 +31,7 @@ export interface AnalyzerCliConfig {

ts?: typeof tsModule;
cwd?: string;
pathAsAbsolute?: boolean;

webtypesConfig?: WebTypesTransformerConfig;
}
12 changes: 11 additions & 1 deletion src/cli/cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { log } from "./util/log";
*/
export function cli(): void {
const argv = yargs
.pkgConf("wca")
.usage("Usage: $0 <command> [glob..] [options]")
.command<AnalyzerCliConfig>({
command: ["analyze [glob..]", "$0"],
Expand Down Expand Up @@ -50,7 +51,7 @@ o {tagname}: The element's tag name`,
})
.option("format", {
describe: `Specify output format`,
choices: ["md", "markdown", "json", "json2", "vscode"],
choices: ["md", "markdown", "json", "json2", "vscode", "webtypes"],
nargs: 1,
alias: "f"
})
Expand Down Expand Up @@ -103,6 +104,15 @@ o {tagname}: The element's tag name`,
string: true,
hidden: true
})
.option("pathAsAbsolute", {
describe: "Consider paths as absolute: don't add './' in front of paths",
boolean: true,
hidden: true
})
.option("webtypesConfig", {
describe: "WebTypes header configuration",
string: true
})

.alias("v", "version")
.help("h")
Expand Down
4 changes: 3 additions & 1 deletion src/transformers/transform-analyzer-result.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ import { TransformerConfig } from "./transformer-config";
import { TransformerFunction } from "./transformer-function";
import { TransformerKind } from "./transformer-kind";
import { vscodeTransformer } from "./vscode/vscode-transformer";
import { webtypesTransformer } from "./webtypes/webtypes-transformer";

const transformerFunctionMap: Record<TransformerKind, TransformerFunction> = {
debug: debugJsonTransformer,
json: jsonTransformer,
json2: json2Transformer,
markdown: markdownTransformer,
md: markdownTransformer,
vscode: vscodeTransformer
vscode: vscodeTransformer,
webtypes: webtypesTransformer
};

/**
Expand Down
17 changes: 17 additions & 0 deletions src/transformers/transformer-config.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,28 @@
import { VisibilityKind } from "../analyze/types/visibility-kind";
import { GenericContributions } from "./webtypes/webtypes-schema";

export interface TransformerConfig {
cwd?: string;
pathAsAbsolute?: boolean;
visibility?: VisibilityKind;
markdown?: {
titleLevel?: number; // deprecated
headerLevel?: number;
};
inlineTypes?: boolean;
webTypes?: WebTypesTransformerConfig;
}

export interface WebTypesTransformerConfig {
name: string;
version: string;
"default-icon"?: string;
"js-types-syntax"?: "typescript";
framework?: string;
"framework-config"?: WebTypesFrameworkConfig;
"description-markup"?: "html" | "markdown" | "none";
}

export interface WebTypesFrameworkConfig {
[k: string]: GenericContributions;
}
2 changes: 1 addition & 1 deletion src/transformers/transformer-kind.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export type TransformerKind = "md" | "markdown" | "json" | "vscode" | "debug" | "json2";
export type TransformerKind = "md" | "markdown" | "json" | "vscode" | "debug" | "json2" | "webtypes";
Loading