Skip to content

Commit 353762b

Browse files
create interfaces and refactored code into seperate classes and files
1 parent b6f8790 commit 353762b

19 files changed

Lines changed: 200 additions & 117 deletions

demo.js

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

demo.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

demo.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export class AA {
2+
static template =html`
3+
<div>[[this.bb]]</div>
4+
<div>[[this.dd]]</div>
5+
<div>[[this.bb]]</div>
6+
<input type="checkbox" meta="geht das" .checked="{{this.ee}}" ein-gutiger-attribut-fuer-input="hi" ein-gutiger-attribut-fuer-img="hi" >
7+
<img type="checkbox" meta="geht das" .checked="{{this.ee}}" ein-gutiger-attribut-fuer-input="hi" ein-gutiger-attribut-fuer-img="hi" >
8+
`;
9+
10+
static templatef = html`
11+
<div>[[this.bb]]</div>
12+
<input type="checkbox" meta="hi" .checked="{{this.ee}}">Value: [[this.ee]]
13+
14+
15+
16+
17+
18+
<div>[[this.bb]]</div>
19+
`;
20+
static style = css`
21+
:host {
22+
font-size: 20px;
23+
}`;
24+
25+
26+
27+
static styleA = css`
28+
:host {
29+
font-size: 20px;
30+
}`;
31+
}

src/class/CssValidator.ts

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import * as cssService from "vscode-css-languageservice"
55
import { TextDocument } from 'vscode-languageserver-textdocument';
66
import { createPositions } from "../utils/createPosition";
77
import { createVscodeDiagnostic } from "../utils/createVscodeDiagnostic";
8-
import { GlobalOffsets } from "../interface/GlobalOffsets";
9-
8+
import { GlobalOffsets } from "../interface/IGlobalOffsets";
109

1110
export class CssValidator implements ICssValidator{
1211

@@ -18,21 +17,30 @@ export class CssValidator implements ICssValidator{
1817

1918
constructor(CssTemplateArray: Array<{ cssTemplate: CssTagTemplate }>,
2019
document: vscode.TextDocument,
21-
diagnosticCollection: vscode.Diagnostic[],
22-
cssLanguageService:cssService.LanguageService){
20+
diagnosticCollection: vscode.Diagnostic[]){
2321

2422
this.CssTemplateArray = CssTemplateArray;
2523
this.document = document;
2624
this.diagnosticCollection = diagnosticCollection;
27-
this.cssLanguageService = cssLanguageService
28-
}
29-
25+
this.cssLanguageService = cssService.getCSSLanguageService()
26+
}
27+
3028
validate():void{
3129
for (const singleBlockOfCssTemplate of this.CssTemplateArray){
32-
const vald = this.validateBlockOfCss(singleBlockOfCssTemplate.cssTemplate)
33-
}
30+
this.validateBlockOfCss(singleBlockOfCssTemplate.cssTemplate)
3431
}
32+
}
33+
34+
private validateBlockOfCss(singleBlockOfCssTemplate: CssTagTemplate){
35+
const virtualDocumentCssLangServ = this.createVirtualDocument(singleBlockOfCssTemplate.content)
36+
37+
const diagnosticCssLangServ = this.createDiagnosticCollForLangServ(virtualDocumentCssLangServ)
3538

39+
for (const singleDiagnostic of diagnosticCssLangServ){
40+
this.createDiagnostic(singleDiagnostic,singleBlockOfCssTemplate,virtualDocumentCssLangServ)
41+
}
42+
}
43+
3644
private createVirtualDocument(content: string):TextDocument{
3745
return TextDocument.create( this.document.uri.toString(),'css',this.document.version,content)
3846
}
@@ -44,16 +52,6 @@ export class CssValidator implements ICssValidator{
4452
virtualDocumentCssLangServ))
4553
}
4654

47-
private validateBlockOfCss(singleBlockOfCssTemplate: CssTagTemplate){
48-
const virtualDocumentCssLangServ = this.createVirtualDocument(singleBlockOfCssTemplate.content)
49-
50-
const diagnosticCssLangServ = this.createDiagnosticCollForLangServ(virtualDocumentCssLangServ)
51-
52-
for (const singleDiagnostic of diagnosticCssLangServ){
53-
this.createDiagnostic(singleDiagnostic,singleBlockOfCssTemplate,virtualDocumentCssLangServ)
54-
}
55-
}
56-
5755
private createDiagnostic(singleDiagnostic:cssService.Diagnostic,singleBlockOfCssTemplate:CssTagTemplate,virtualDocumentCssLangServ:cssService.TextDocument){
5856
const diagnosticSeverity = singleDiagnostic.severity!.valueOf as unknown as vscode.DiagnosticSeverity
5957

src/class/HtmlValidator.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as vscode from "vscode";
22
import * as htmlService from "vscode-html-languageservice";
3-
import {ITagData} from "../interface/tagData"
4-
import { CustomElement } from "../class/customElement";
3+
import { ITagData } from "../interface/ITagData"
4+
import { CustomElement } from "../class/CustomElement";
55
import { HtmlTagTemplate } from "../interface/IHtmlTemplate";
6-
import {extractHtmlTagWithAttr} from "../utils/extractHtmlTagWithAttr"
6+
import { extractHtmlTagWithAttr } from "../utils/extractHtmlTagWithAttr"
77
import { createPositions } from "../utils/createPosition";
88
import { createVscodeDiagnostic } from "../utils/createVscodeDiagnostic";
99
import { IHtmlValidator } from "../interface/IHtmlValidator";
@@ -99,7 +99,7 @@ export class HtmlValidator implements IHtmlValidator {
9999
createVscodeDiagnostic(
100100
positions.globalStartOffset,
101101
positions.globalEndOffset,
102-
`Attribute ${attribute.name} is unknown or not valid for ${tagName}.`,
102+
`Unknown property: "${attribute.name}"`,
103103
vscode.DiagnosticSeverity.Warning,
104104
this.document
105105
)
@@ -121,7 +121,7 @@ export class HtmlValidator implements IHtmlValidator {
121121
createVscodeDiagnostic(
122122
positions.globalStartOffset,
123123
positions.globalEndOffset,
124-
`Tag ${tagData.name} is unknown. Check for typos.`,
124+
`Unknown property: "${tagData.name}"`,
125125
vscode.DiagnosticSeverity.Warning,
126126
this.document
127127
)

src/document/html-document/parse/html-tag-extractor.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as ts from "typescript";
22
import { findTaggedTemplates } from "lit-analyzer/lib/analyze/parse/tagged-template/find-tagged-templates.js";
3+
import { ILitDataTemplate } from "../../../interface/ILitDataTemplate";
34

4-
export function extractHtmlTemplates(code: string) {
5+
export function extractHtmlTemplates(code: string):ILitDataTemplate[] { // Changed return types for better handling
56
const sourceFile = ts.createSourceFile(
67
"temp.ts",
78
code,
@@ -32,7 +33,7 @@ export function extractHtmlTemplates(code: string) {
3233
});
3334
}
3435

35-
export function extractCssTemplates(code: string) {
36+
export function extractCssTemplates(code: string):ILitDataTemplate[] { // Changed return types for better handling
3637
const sourceFile = ts.createSourceFile(
3738
"temp.ts",
3839
code,

src/extension.ts

Lines changed: 30 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,15 @@
11
import * as vscode from "vscode";
2-
import { extractHtmlTemplates,extractCssTemplates } from './document/html-document/parse/html-tag-extractor';
3-
import * as cssService from "vscode-css-languageservice"
2+
import { extractCssTemplateBlock } from "./utils/extractCssTemplateBlock";
43
import { HtmlTagTemplate } from "./interface/IHtmlTemplate";
54
import { CssTagTemplate } from "./interface/ICssTemplate";
65
import {HtmlValidator} from "./class/HtmlValidator"
76
import { CssValidator } from "./class/CssValidator";
7+
import { extractHtmlTemplateBlock } from "./utils/extractHtmlTemplateBlock";
88

99
type Parse5 = typeof import("parse5", { with: { "resolution-mode": "import" } });
1010
// error collection of vs code
1111
const errorCollection = vscode.languages.createDiagnosticCollection("myExtension");
1212

13-
const cssLanguageService = cssService.getCSSLanguageService()
14-
15-
function extractHtmlAndCssBlocks(document: vscode.TextDocument
16-
): {
17-
contentArrayOfHtmlTemplates:Array<{ htmlTemplate: HtmlTagTemplate }>,
18-
contentArrayOfCssTemplates:Array<{ cssTemplate: CssTagTemplate }>
19-
} | undefined
20-
{
21-
// vs code document text
22-
const documentText = document.getText();
23-
// extracted html templates found in documentText
24-
const htmlTemplates = extractHtmlTemplates(documentText);
25-
// extracted css templates found in documentText
26-
const cssTemplates = extractCssTemplates(documentText);
27-
// Arrays to return
28-
const contentArrayOfHtmlTemplates: Array<{ htmlTemplate: HtmlTagTemplate }> = [];
29-
30-
const contentArrayOfCssTemplates: Array<{ cssTemplate: CssTagTemplate }> = [];
31-
32-
htmlTemplates.forEach((template, i) =>
33-
{
34-
contentArrayOfHtmlTemplates.push({
35-
htmlTemplate:{
36-
tag: template.tag,
37-
content: template.content,
38-
pos: {startOffset: template.startPos, endOffset: template.endPos}}});
39-
}
40-
);
41-
cssTemplates.forEach((template, i) =>
42-
{
43-
contentArrayOfCssTemplates.push({
44-
cssTemplate:{
45-
tag: template.tag,
46-
content: template.content,
47-
pos: {startOffset: template.startPos, endOffset: template.endPos}}});
48-
}
49-
);
50-
if (contentArrayOfCssTemplates.length === 0 && contentArrayOfHtmlTemplates.length === 0){
51-
vscode.window.showErrorMessage(`didn't find a valid css or html template tag`)
52-
return undefined
53-
}
54-
55-
return {
56-
contentArrayOfCssTemplates: contentArrayOfCssTemplates,
57-
contentArrayOfHtmlTemplates: contentArrayOfHtmlTemplates
58-
};
59-
}
60-
6113
function htmlValidator(
6214
ps: Parse5,
6315
htmlTemplateArray: Array<{ htmlTemplate: HtmlTagTemplate }>,
@@ -75,19 +27,16 @@ function htmlValidator(
7527
function cssValidator(
7628
cssTemplateArray: Array<{ cssTemplate: CssTagTemplate }>,
7729
document: vscode.TextDocument,
78-
diagnosticCollection: vscode.Diagnostic[],
79-
cssLanguageService: cssService.LanguageService
30+
diagnosticCollection: vscode.Diagnostic[]
8031
):void
8132
{
8233
const validator = new CssValidator(
8334
cssTemplateArray,
8435
document,
85-
diagnosticCollection,
86-
cssLanguageService
36+
diagnosticCollection
8737
).validate();
8838
}
8939

90-
9140
export async function activate(context: vscode.ExtensionContext) {
9241
const ps = await import("parse5");
9342

@@ -96,37 +45,33 @@ export async function activate(context: vscode.ExtensionContext) {
9645
context.subscriptions.push(diagnostics);
9746

9847
vscode.window.showInformationMessage("Validator is now active");
99-
100-
const editor = vscode.window.activeTextEditor;
101-
102-
if (editor)
103-
{
104-
const timers = new Map<string, NodeJS.Timeout>();
105-
const schedule = (doc: vscode.TextDocument) => {
106-
if (timers.get(doc.uri.toString())) clearTimeout(timers.get(doc.uri.toString()));
107-
timers.set
108-
(
109-
doc.uri.toString(), setTimeout
110-
(() =>
111-
{
112-
const diagnosticCollection: vscode.Diagnostic[] = [];
113-
114-
const templates = extractHtmlAndCssBlocks(doc);
115-
if (!templates){return}
116-
htmlValidator(ps,templates.contentArrayOfHtmlTemplates,doc,diagnosticCollection);
117-
cssValidator(templates.contentArrayOfCssTemplates,doc,diagnosticCollection,cssLanguageService)
118-
119-
errorCollection.set(doc.uri,diagnosticCollection)
120-
}
121-
)
122-
)
48+
const timers = new Map<string, NodeJS.Timeout>();
49+
const schedule = (doc: vscode.TextDocument) => {
50+
if (timers.get(doc.uri.toString())) clearTimeout(timers.get(doc.uri.toString()));
51+
timers.set
52+
(
53+
doc.uri.toString(), setTimeout
54+
(() =>
55+
{
56+
const diagnosticCollection: vscode.Diagnostic[] = [];
57+
58+
const htmlTemplates = extractHtmlTemplateBlock(doc);
59+
if (!htmlTemplates){return}
60+
htmlValidator(ps,htmlTemplates,doc,diagnosticCollection);
61+
const cssTemplates = extractCssTemplateBlock(doc)
62+
if(!cssTemplates){return}
63+
cssValidator(cssTemplates,doc,diagnosticCollection)
64+
65+
errorCollection.set(doc.uri,diagnosticCollection)
12366
}
67+
)
68+
)
69+
}
12470

125-
context.subscriptions.push(
126-
vscode.workspace.onDidChangeTextDocument((e) => schedule(e.document)),
127-
vscode.workspace.onDidOpenTextDocument((doc) => schedule(doc)),
128-
vscode.workspace.onDidCloseTextDocument((doc) => diagnostics.delete(doc.uri))
129-
);
130-
};
71+
context.subscriptions.push(
72+
vscode.workspace.onDidChangeTextDocument((e) => schedule(e.document)),
73+
vscode.workspace.onDidOpenTextDocument((doc) => schedule(doc)),
74+
vscode.workspace.onDidCloseTextDocument((doc) => diagnostics.delete(doc.uri))
75+
);
13176
};
13277
export function deactivate() {}

src/interface/ICssTemplate.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PositionOfContent } from "./PositionOfContent";
1+
import { PositionOfContent } from "./IPositionOfContent";
22
export interface CssTagTemplate {
33
tag: string;
44
content: string;

src/interface/IHtmlTemplate.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PositionOfContent } from "./PositionOfContent";
1+
import { PositionOfContent } from "./IPositionOfContent";
22
export interface HtmlTagTemplate {
33
tag: string;
44
content: string;

0 commit comments

Comments
 (0)