Skip to content

Commit 3fdd7fc

Browse files
timotheeguerintimotheeguerin
authored
Basic html program viewer (microsoft#392)
1 parent 95943a9 commit 3fdd7fc

24 files changed

+737
-8
lines changed

‎common/changes/@cadl-lang/compiler/feature-html-program-viewer_2022-04-06-20-01.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "@cadl-lang/compiler",
5+
"comment": "",
6+
"type": "none"
7+
}
8+
],
9+
"packageName": "@cadl-lang/compiler"
10+
}

‎common/changes/@cadl-lang/html-program-viewer/feature-html-program-viewer_2022-04-06-20-01.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "@cadl-lang/html-program-viewer",
5+
"comment": "",
6+
"type": "none"
7+
}
8+
],
9+
"packageName": "@cadl-lang/html-program-viewer"
10+
}

‎common/changes/@cadl-lang/rest/feature-html-program-viewer_2022-05-19-01-22.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"changes": [
3+
{
4+
"packageName": "@cadl-lang/rest",
5+
"comment": "",
6+
"type": "none"
7+
}
8+
],
9+
"packageName": "@cadl-lang/rest"
10+
}

‎common/config/rush/pnpm-lock.yaml

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

‎packages/compiler/lib/decorators.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export function isNeverType(type: Type): type is NeverType {
152152
return type.kind === "Intrinsic" && type.name === "never";
153153
}
154154

155-
const numericTypesKey = Symbol("numericTypes");
155+
const numericTypesKey = Symbol("numeric");
156156
export function $numeric({ program }: DecoratorContext, target: Type) {
157157
if (!isIntrinsic(program, target)) {
158158
program.reportDiagnostic(

‎packages/html-program-viewer/.c8rc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"reporter": ["cobertura", "json", "text"]
3+
}

‎packages/html-program-viewer/.eslintrc.cjs

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
require("@cadl-lang/eslint-config-cadl/patch/modern-module-resolution");
2+
3+
module.exports = {
4+
extends: "@cadl-lang/eslint-config-cadl",
5+
parserOptions: { tsconfigRootDir: __dirname },
6+
};

‎packages/html-program-viewer/.mocharc.yaml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
timeout: 5000
2+
require: source-map-support/register
3+
spec: "dist/test/**/*.js"
4+
ignore: "dist/test/manual/**/*.js"

‎packages/html-program-viewer/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) Microsoft Corporation. All rights reserved.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE

‎packages/html-program-viewer/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Cadl Html Program viewer emitter.
2+
3+
## See also
4+
5+
- [Cadl Getting Started](https://github.com/microsoft/cadl#getting-started)
6+
- [Cadl Tutorial](https://github.com/microsoft/cadl/blob/main/docs/tutorial.md)
7+
- [Cadl for the OpenAPI Developer](https://github.com/microsoft/cadl/blob/main/docs/cadl-for-openapi-dev.md)

‎packages/html-program-viewer/package.json

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"name": "@cadl-lang/html-program-viewer",
3+
"version": "0.1.0",
4+
"author": "Microsoft Corporation",
5+
"description": "Cadl library for emitting an html view of the program.",
6+
"homepage": "https://github.com/Azure/cadl",
7+
"readme": "https://github.com/Azure/cadl/blob/master/README.md",
8+
"license": "MIT",
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/Azure/cadl.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/Azure/cadl/issues"
15+
},
16+
"keywords": [
17+
"cadl"
18+
],
19+
"type": "module",
20+
"main": "dist/src/index.js",
21+
"exports": {
22+
".": "./dist/src/index.js",
23+
"./testing": "./dist/src/testing/index.js"
24+
},
25+
"typesVersions": {
26+
"*": {
27+
"*": [
28+
"./dist/src/index.d.ts"
29+
],
30+
"testing": [
31+
"./dist/src/testing/index.d.ts"
32+
]
33+
}
34+
},
35+
"cadlMain": "dist/src/index.js",
36+
"engines": {
37+
"node": ">=14.0.0"
38+
},
39+
"scripts": {
40+
"clean": "rimraf ./dist ./temp",
41+
"build": "tsc -p .",
42+
"watch": "tsc -p . --watch",
43+
"test": "mocha",
44+
"test-official": "c8 mocha --forbid-only",
45+
"lint": "eslint . --ext .ts --max-warnings=0",
46+
"lint:fix": "eslint . --fix --ext .ts"
47+
},
48+
"files": [
49+
"lib/*.cadl",
50+
"dist/**",
51+
"!dist/test/**"
52+
],
53+
"peerDependencies": {
54+
"@cadl-lang/compiler": "~0.30.0"
55+
},
56+
"dependencies": {
57+
"prettier": "~2.6.2",
58+
"react": "~18.0.0",
59+
"react-dom": "~18.0.0"
60+
},
61+
"devDependencies": {
62+
"@types/mocha": "~9.1.0",
63+
"@types/node": "~16.0.3",
64+
"@types/prettier": "^2.0.2",
65+
"@types/react": "~18.0.5",
66+
"@types/react-dom": "~18.0.1",
67+
"@cadl-lang/compiler": "~0.31.0",
68+
"@cadl-lang/eslint-config-cadl": "~0.3.0",
69+
"eslint": "^8.12.0",
70+
"mocha": "~9.2.0",
71+
"c8": "~7.11.0",
72+
"rimraf": "~3.0.2",
73+
"typescript": "~4.6.3"
74+
}
75+
}

‎packages/html-program-viewer/src/common.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { FunctionComponent, PropsWithChildren } from "react";
2+
3+
export const Group: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => {
4+
return <div className="group">{children}</div>;
5+
};
6+
7+
export interface SectionProps {
8+
title: string;
9+
id?: string;
10+
hide?: boolean;
11+
}
12+
13+
export const Section: FunctionComponent<PropsWithChildren<SectionProps>> = ({
14+
id,
15+
title,
16+
hide,
17+
children,
18+
}) => {
19+
if (hide) {
20+
return <div></div>;
21+
}
22+
return (
23+
<div className="section" id={id}>
24+
<div className="section-title">{title}</div>
25+
<div className="section-content">{children}</div>
26+
</div>
27+
);
28+
};
29+
30+
export const Item: FunctionComponent<PropsWithChildren<SectionProps>> = ({
31+
id,
32+
title,
33+
hide,
34+
children,
35+
}) => {
36+
if (hide) {
37+
return <div></div>;
38+
}
39+
return (
40+
<div className="item" id={id}>
41+
<div className="item-title">{title}</div>
42+
<div className="item-content">{children}</div>
43+
</div>
44+
);
45+
};
46+
47+
export const Literal: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => {
48+
return <div className="literal">{children}</div>;
49+
};

‎packages/html-program-viewer/src/emitter.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Program, resolvePath } from "@cadl-lang/compiler";
2+
import { readFile } from "fs/promises";
3+
import { dirname, resolve } from "path";
4+
import { fileURLToPath } from "url";
5+
import { renderProgram } from "./ui.js";
6+
7+
export async function $onEmit(program: Program) {
8+
const html = renderProgram(program);
9+
const htmlPath = resolvePath(program.compilerOptions.outputPath!, "cadl-program.html");
10+
const cssPath = resolvePath(program.compilerOptions.outputPath!, "style.css");
11+
await program.host.writeFile(
12+
htmlPath,
13+
`<!DOCTYPE html><html lang="en"><link rel="stylesheet" href="style.css"><body>${html}</body></html>`
14+
);
15+
const cssFile = resolve(dirname(fileURLToPath(import.meta.url)), "../../src/style.css");
16+
await program.host.writeFile(cssPath, await (await readFile(cssFile)).toString());
17+
}

‎packages/html-program-viewer/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./emitter.js";

‎packages/html-program-viewer/src/style.css

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
body {
2+
font-family: monospace;
3+
background-color: #f3f3f3;
4+
}
5+
6+
table {
7+
border-collapse: separate;
8+
border-spacing: 0;
9+
border: 1px solid #dedede;
10+
}
11+
12+
th,
13+
td,
14+
caption {
15+
border: 1px solid #dedede;
16+
}
17+
18+
.group {
19+
border: 1px solid #c5c5c5;
20+
padding: 1rem;
21+
}
22+
23+
.section {
24+
border: 1px solid #c5c5c5;
25+
}
26+
27+
.section > .section-title {
28+
border-bottom: 1px solid #c5c5c5;
29+
background-color: #4875ca;
30+
color: #f5f5f5;
31+
padding: 2px 5px;
32+
}
33+
34+
.section > .section-content {
35+
padding: 1rem;
36+
}
37+
38+
.item {
39+
border: 1px solid #c5c5c5;
40+
}
41+
42+
.item > .item-title {
43+
border-bottom: 1px solid #c5c5c5;
44+
background-color: #dedede;
45+
padding: 2px 5px;
46+
}
47+
48+
.item > .item-content {
49+
padding: 1rem;
50+
}
51+
52+
.literal {
53+
color: #5da713;
54+
display: inline;
55+
}
56+
57+
ul {
58+
margin: 0;
59+
padding-left: 20px;
60+
overflow: auto;
61+
}
62+
63+
li {
64+
margin: 0;
65+
list-style: none;
66+
position: relative;
67+
}
68+
69+
.type-type {
70+
display: inline;
71+
color: #7A3E9D;
72+
margin-right: 5px;
73+
}
74+
75+
.type-name {
76+
display: inline;
77+
color: #333333;
78+
}
79+
80+
.type-ref {
81+
color: #268bd2;
82+
text-decoration: none;
83+
}
84+
85+
.type-ref:hover {
86+
text-decoration: underline;
87+
}
88+
89+
.prop {
90+
}
91+
.prop .prop-name {
92+
color: #9C5D27;
93+
}

0 commit comments

Comments
 (0)