From 6c89bb367a1c00d78af05fbfcb4f891c3119e78f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=80=86=E8=91=B5?= <xianyong.yxy@alibaba-inc.com>
Date: Thu, 12 May 2022 17:36:18 +0800
Subject: [PATCH 1/3] feat(compiler): handle error

---
 packages/pwc-compiler/package.json            |   3 +-
 packages/pwc-compiler/src/compileScript.ts    |   9 +-
 packages/pwc-compiler/src/errors.ts           |  46 ++++++
 packages/pwc-compiler/src/index.ts            |   1 +
 packages/pwc-compiler/src/parse.ts            | 136 ++++++++++++------
 packages/pwc-compiler/src/validate.ts         |  31 +++-
 packages/rollup-plugin-pwc/src/utils/error.ts |  33 ++++-
 7 files changed, 201 insertions(+), 58 deletions(-)
 create mode 100644 packages/pwc-compiler/src/errors.ts

diff --git a/packages/pwc-compiler/package.json b/packages/pwc-compiler/package.json
index 9b50a1b..6dd2468 100644
--- a/packages/pwc-compiler/package.json
+++ b/packages/pwc-compiler/package.json
@@ -42,14 +42,13 @@
     "npm": ">=3.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.17.9",
     "@babel/generator": "^7.17.7",
     "@babel/parser": "^7.17.9",
     "@babel/plugin-proposal-decorators": "^7.17.2",
     "@babel/traverse": "^7.17.3",
     "@babel/types": "^7.17.0",
     "@swc/helpers": "^0.3.8",
-    "parse5": "^6.0.1",
+    "parse5": "^7.0.0",
     "postcss": "^8.4.12",
     "rfdc": "^1.3.0",
     "source-map": "^0.7.3"
diff --git a/packages/pwc-compiler/src/compileScript.ts b/packages/pwc-compiler/src/compileScript.ts
index 801ea82..2770995 100644
--- a/packages/pwc-compiler/src/compileScript.ts
+++ b/packages/pwc-compiler/src/compileScript.ts
@@ -1,4 +1,5 @@
 import generate from '@babel/generator';
+import { join } from 'path';
 import rfdc from 'rfdc';
 import type { SFCDescriptor, SFCScriptBlock } from './parse';
 import { compileTemplate } from './compileTemplate';
@@ -8,9 +9,11 @@ const deepClone = rfdc();
 
 export interface SFCScriptCompileResult extends SFCScriptBlock {
   filename: string;
+  sourceRoot: string;
 }
 
 export function compileScript(descriptor: SFCDescriptor): SFCScriptCompileResult {
+  const rootContext = process.cwd();
   const { script, filename } = descriptor;
   const ast = deepClone(descriptor.script.ast);
 
@@ -26,8 +29,11 @@ export function compileScript(descriptor: SFCDescriptor): SFCScriptCompileResult
     transformScript(ast, { templateString: null });
   }
 
+  const sourceRoot = join(rootContext, 'src');
   const { code, map } = generate(ast, {
-    sourceMaps: false,
+    sourceMaps: true,
+    sourceRoot,
+    sourceFileName: filename,
     decoratorsBeforeExport: true,
   });
 
@@ -35,6 +41,7 @@ export function compileScript(descriptor: SFCDescriptor): SFCScriptCompileResult
   return {
     ...script,
     filename,
+    sourceRoot,
     content: code,
     map,
   };
diff --git a/packages/pwc-compiler/src/errors.ts b/packages/pwc-compiler/src/errors.ts
new file mode 100644
index 0000000..7366edd
--- /dev/null
+++ b/packages/pwc-compiler/src/errors.ts
@@ -0,0 +1,46 @@
+import type { SourceLocation } from './parse.js';
+
+export interface CompilerError extends SyntaxError {
+  code: number | string;
+  loc?: SourceLocation;
+}
+
+export function createCompilerError(
+  code: number | string,
+  loc?: SourceLocation,
+): CompilerError {
+  const msg = typeof code === 'string' ? code : errorMessages[code];
+  const error = new SyntaxError(String(msg)) as CompilerError;
+  error.code = code;
+  error.loc = loc;
+  return error;
+}
+
+export const enum ErrorCodes {
+  // parse errors
+  MISSING_SCRIPT_TAG,
+  DUPLICATE_SCRIPT_TAG,
+  DUPLICATE_TEMPLATE_TAG,
+  DUPLICATE_STYLE_TAG,
+  // script errors
+  MISSING_EXPORT_DEFAULT,
+  MISSING_EXPORT_CLASS,
+  MISSING_EXPORT_CLASS_EXTENDED_FROM_HTMLELEMENT,
+  // transform errors
+  X_V_IF_NO_EXPRESSION,
+}
+
+export const errorMessages: Record<ErrorCodes, string> = {
+  // parse errors
+  [ErrorCodes.MISSING_SCRIPT_TAG]: 'PWC must contain one <script> tag.',
+  [ErrorCodes.DUPLICATE_SCRIPT_TAG]: 'PWC mustn\'t contain more than one <script> tag.',
+  [ErrorCodes.DUPLICATE_TEMPLATE_TAG]: 'PWC mustn\'t contain more than one <template> tag.',
+  [ErrorCodes.DUPLICATE_STYLE_TAG]: 'PWC mustn\'t contain more than one <template> tag.',
+
+  // script errors
+  [ErrorCodes.MISSING_EXPORT_DEFAULT]: 'PWC must allow one export default',
+  [ErrorCodes.MISSING_EXPORT_CLASS]: 'PWC must export a class',
+  [ErrorCodes.MISSING_EXPORT_CLASS_EXTENDED_FROM_HTMLELEMENT]: 'PWC must export a class extended from HTMLElement',
+  // transform errors
+  [ErrorCodes.X_V_IF_NO_EXPRESSION]: 'x-if/x-else-if is missing expression.',
+};
diff --git a/packages/pwc-compiler/src/index.ts b/packages/pwc-compiler/src/index.ts
index 15a9f01..c6aaf27 100644
--- a/packages/pwc-compiler/src/index.ts
+++ b/packages/pwc-compiler/src/index.ts
@@ -2,4 +2,5 @@ export * from './parse';
 export * from './compileScript';
 export * from './compileTemplate';
 export * from './compileStyle';
+export * from './errors';
 export { compileTemplateInRuntime } from './compileTemplateInRuntime';
diff --git a/packages/pwc-compiler/src/parse.ts b/packages/pwc-compiler/src/parse.ts
index ed0972d..f3ad6a3 100644
--- a/packages/pwc-compiler/src/parse.ts
+++ b/packages/pwc-compiler/src/parse.ts
@@ -1,9 +1,10 @@
-import { parseFragment } from 'parse5';
+import { type Token, parseFragment } from 'parse5';
 import * as babelParser from '@babel/parser';
 import type { File } from '@babel/types';
 import type { RawSourceMap } from 'source-map';
 import { SourceMapGenerator } from 'source-map';
 import { validateScript, validateTemplate } from './validate';
+import { type CompilerError, createCompilerError, ErrorCodes } from './errors';
 
 export interface SFCBlock {
   type: string;
@@ -48,13 +49,18 @@ export interface SFCParseResult {
   errors: SyntaxError[];
 }
 
-export interface SourceLocation {
-  startLine: number;
-  startCol: number;
-  startOffset: number;
-  endLine: number;
-  endCol: number;
-  endOffset: number;
+export interface Position {
+  line: number;
+  column: number;
+  offset?: number;
+}
+
+export interface Location {
+  start: Position;
+  end: Position;
+}
+
+export interface SourceLocation extends Location {
   source: string;
 }
 
@@ -68,9 +74,16 @@ export interface ElementNode {
   value?: string;
   data?: string;
   attrs?: AttributeNode[];
+  content?: ElementNode;
   childNodes?: ElementNode[];
   parentNode?: ElementNode;
-  sourceCodeLocation?: SourceLocation;
+  loc?: SourceLocation;
+}
+
+function createSourceLocation(originalSource: string, locationInfo: Location): SourceLocation {
+  const { start, end } = locationInfo;
+  const source = originalSource.slice(start.offset, end.offset);
+  return { start, end, source };
 }
 
 function createBlock(
@@ -78,29 +91,18 @@ function createBlock(
   source: string,
 ): SFCBlock {
   const type = node.nodeName;
-  let { startLine, startCol, startOffset, endLine, endCol, endOffset } = node.sourceCodeLocation;
+  let { start, end } = node.loc;
   let content = '';
 
   if (node.childNodes.length) {
-    const startNodeLocation = node.childNodes[0].sourceCodeLocation;
-    const endNodeLocation = node.childNodes[node.childNodes.length - 1].sourceCodeLocation;
-    content = source.slice(startNodeLocation.startOffset, endNodeLocation.endOffset);
-
-    startLine = startNodeLocation.startLine;
-    startCol = startNodeLocation.startCol;
-    startOffset = startNodeLocation.startOffset;
-    endLine = endNodeLocation.endLine;
-    endCol = endNodeLocation.endCol;
-    endOffset = endNodeLocation.endOffset;
+    const { start } = node.childNodes[0].loc;
+    const { end } = node.childNodes[node.childNodes.length - 1].loc;
+    content = source.slice(start.offset, end.offset);
   }
   const loc = {
     source: content,
-    startLine,
-    startCol,
-    startOffset,
-    endLine,
-    endCol,
-    endOffset,
+    start,
+    end,
   };
   const attrs: Record<string, string | true> = {};
   const block: SFCBlock = {
@@ -109,7 +111,7 @@ function createBlock(
     loc,
     attrs,
   };
-  node.attrs.forEach((attr) => {
+  node.attrs?.forEach((attr) => {
     attrs[attr.name] = attr.value ? attr.value || true : true;
     if (attr.name === 'lang') {
       block.lang = attr.value && attr.value;
@@ -164,11 +166,41 @@ function isEmptyString(str: string): boolean {
   return str.replace(/(^\s*)|(\s*$)/g, '').length === 0;
 }
 
+function transformSourceCodeLocation(root: any): void {
+  setNodeSourceCodeLocation(root, root.sourceCodeLocation);
+  if (root.childNodes?.length) {
+    root.childNodes.forEach(node => transformSourceCodeLocation(node));
+  }
+  if (root.content) {
+    transformSourceCodeLocation(root.content);
+  }
+}
+
+function setNodeSourceCodeLocation(node: any, location: Token.ElementLocation | null): void {
+  if (location) {
+    const { startLine, startCol, startOffset, endLine, endCol, endOffset } = location;
+    node.loc = {
+      start: {
+        line: startLine,
+        column: startCol,
+        offset: startOffset,
+      },
+      end: {
+        line: endLine,
+        column: endCol,
+        offset: endOffset,
+      },
+    };
+  }
+}
+
 export function parse(source: string, {
   filename = 'anonymous.pwc',
   sourceRoot = '',
   sourceMap = true,
 }: SFCParseOptions = {}): SFCParseResult {
+  let errors: (CompilerError | SyntaxError)[] = [];
+
   const descriptor: SFCDescriptor = {
     filename,
     source,
@@ -177,27 +209,42 @@ export function parse(source: string, {
     style: null,
   };
 
-  let dom;
-  try {
-    dom = parseFragment(source, { sourceCodeLocationInfo: true });
-  } catch (err) {
-    throw new Error(`[@pwc/compiler] compile error: ${err}`);
-  }
-
-  let errors = [];
+  const dom = parseFragment(source,
+    {
+      sourceCodeLocationInfo: true,
+      onParseError: (parseError) => {
+        const { code, startLine, startCol, startOffset, endLine, endCol, endOffset } = parseError;
+        const err = createCompilerError(code, {
+          start: { line: startLine, column: startCol, offset: startOffset },
+          end: { line: endLine, column: endCol, offset: endOffset },
+          source,
+        });
+        errors.push(err);
+      }
+    });
+  transformSourceCodeLocation(dom);
 
   // Check phase 1: sfc
   const scriptNodeAmount = dom.childNodes.filter(node => node.nodeName === 'script').length;
   if (scriptNodeAmount === 0) {
-    errors.push(new Error('[@pwc/compiler] PWC must contain one <script> tag.'));
+    const err = createCompilerError(ErrorCodes.MISSING_SCRIPT_TAG, {
+      start: { line: 1, column: 1, offset: 0 },
+      end: { line: 1, column: 1, offset: 0 },
+      source,
+    });
+    errors.push(err);
   }
 
-  for (const node of dom.childNodes) {
+  for (let index = 0, length = dom.childNodes.length; index < length; index++) {
+    const node = dom.childNodes[index] as ElementNode;
     if (node.nodeName === 'template') {
       // TODO: Check phase 2: template
       if (descriptor.template) {
-        errors.push(new Error('[@pwc/compiler] PWC mustn\'t contain more than one <template> tag.'));
+        const loc = createSourceLocation(source, node.loc);
+        const err = createCompilerError(ErrorCodes.DUPLICATE_TEMPLATE_TAG, loc);
+        errors.push(err);
       } else {
+        // Template node contains a content property which is the parentNode of the template node's childNodes
         node.childNodes = node.content.childNodes;
         const templateBlock = createBlock(node, source) as SFCTemplateBlock;
         templateBlock.ast = node;
@@ -209,18 +256,22 @@ export function parse(source: string, {
     if (node.nodeName === 'script') {
       // TODO:Check phase 3: script
       if (descriptor.script) {
-        errors.push(new Error('[@pwc/compiler] PWC mustn\'t contain more than only one <script> tag.'));
+        const loc = createSourceLocation(source, node.loc);
+        const err = createCompilerError(ErrorCodes.DUPLICATE_SCRIPT_TAG, loc);
+        errors.push(err);
       } else {
         const scriptBlock = createBlock(node, source) as SFCScriptBlock;
         if (!isEmptyString(scriptBlock.content)) {
           const ast = babelParser.parse(scriptBlock.content, {
             sourceType: 'module',
+            sourceFilename: filename,
+            startLine: node.loc.start.line,
             plugins: [
               ['decorators', { decoratorsBeforeExport: true }],
               'decoratorAutoAccessors',
             ],
           });
-          errors = errors.concat(validateScript(ast));
+          errors = errors.concat(validateScript(ast, scriptBlock.content));
 
           scriptBlock.ast = ast;
           descriptor.script = scriptBlock;
@@ -230,7 +281,9 @@ export function parse(source: string, {
     if (node.nodeName === 'style') {
       // TODO:Check phase 4: style
       if (descriptor.style) {
-        errors.push(new Error('[@pwc/compiler] PWC mustn\'t contain more than one <style> tag.'));
+        const loc = createSourceLocation(source, node.loc);
+        const err = createCompilerError(ErrorCodes.DUPLICATE_STYLE_TAG, loc);
+        errors.push(err);
       } else {
         const styleBlock = createBlock(node, source) as SFCStyleBlock;
         if (!isEmptyString(styleBlock.content)) {
@@ -256,6 +309,7 @@ export function parse(source: string, {
       genMap(descriptor.style);
     }
   }
+
   return {
     descriptor,
     errors,
diff --git a/packages/pwc-compiler/src/validate.ts b/packages/pwc-compiler/src/validate.ts
index 75cc293..6aa276c 100644
--- a/packages/pwc-compiler/src/validate.ts
+++ b/packages/pwc-compiler/src/validate.ts
@@ -2,24 +2,41 @@ import type { File } from '@babel/types';
 import * as t from '@babel/types';
 import babelTraverse from '@babel/traverse';
 import type { ElementNode } from './parse';
-export function validateScript(ast: File) {
-  const errors = [];
+import { type CompilerError, createCompilerError, ErrorCodes } from './errors';
+
+export function validateScript(ast: File, source: string): CompilerError[] {
+  const errors: CompilerError[] = [];
   babelTraverse(ast, {
     // TODO: script validation
     Program(path) {
       const { node } = path;
       const exportDefaultDeclarationNode = node.body.filter(nn => t.isExportDefaultDeclaration(nn));
-      if (!exportDefaultDeclarationNode) {
-        errors.push(new SyntaxError('PWC must allow one export default'));
+      if (!exportDefaultDeclarationNode.length) {
+        const err = createCompilerError(ErrorCodes.MISSING_EXPORT_DEFAULT, {
+          start: node.loc.start,
+          end: node.loc.end,
+          source,
+        });
+        errors.push(err);
       }
     },
     ExportDefaultDeclaration(path) {
       const { node } = path;
       const { declaration } = node;
       if (!t.isClassDeclaration(declaration)) {
-        errors.push(new SyntaxError('PWC must export a class'));
+        const err = createCompilerError(ErrorCodes.MISSING_EXPORT_CLASS, {
+          start: node.loc.start,
+          end: node.loc.end,
+          source,
+        });
+        errors.push(err);
       } else if (!t.isIdentifier(declaration.superClass) || declaration.superClass.name !== 'HTMLElement') {
-        errors.push(new SyntaxError('PWC must export a class extended from HTMLElement'));
+        const err = createCompilerError(ErrorCodes.MISSING_EXPORT_CLASS_EXTENDED_FROM_HTMLELEMENT, {
+          start: node.loc.start,
+          end: node.loc.end,
+          source,
+        });
+        errors.push(err);
       }
     },
   });
@@ -28,7 +45,7 @@ export function validateScript(ast: File) {
 }
 
 export function validateTemplate(ast: ElementNode) {
-  const errors = [];
+  const errors: CompilerError[] = [];
   // TODO:  traverse ast to validate
   return errors;
 }
diff --git a/packages/rollup-plugin-pwc/src/utils/error.ts b/packages/rollup-plugin-pwc/src/utils/error.ts
index bd98843..cdfd3ec 100644
--- a/packages/rollup-plugin-pwc/src/utils/error.ts
+++ b/packages/rollup-plugin-pwc/src/utils/error.ts
@@ -1,13 +1,32 @@
 import type { RollupError } from 'rollup';
+import type { CompilerError } from '@pwc/compiler';
 
 export function createRollupError(
   id: string,
-  error: SyntaxError,
+  error: SyntaxError | CompilerError,
 ): RollupError {
-  return {
-    id,
-    plugin: 'pwc',
-    message: error.message,
-    parserError: error,
-  };
+  if ('code' in error) {
+    return {
+      id,
+      plugin: 'pwc',
+      pluginCode: String(error.code),
+      message: error.message,
+      frame: error.loc!.source,
+      parserError: error,
+      loc: error.loc
+        ? {
+          file: id,
+          line: error.loc.start.line,
+          column: error.loc.start.column,
+        }
+        : undefined,
+    };
+  } else {
+    return {
+      id,
+      plugin: 'pwc',
+      message: error.message,
+      parserError: error,
+    };
+  }
 }

From 909828f6aed78bb4edceee49d57dcc16926c05b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=80=86=E8=91=B5?= <xianyong.yxy@alibaba-inc.com>
Date: Mon, 16 May 2022 17:22:10 +0800
Subject: [PATCH 2/3] feat(build-plugin): update createRollupError

---
 packages/build-plugin-pwc/src/utils/error.ts | 33 +++++++++++++++-----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/build-plugin-pwc/src/utils/error.ts b/packages/build-plugin-pwc/src/utils/error.ts
index bd98843..cdfd3ec 100644
--- a/packages/build-plugin-pwc/src/utils/error.ts
+++ b/packages/build-plugin-pwc/src/utils/error.ts
@@ -1,13 +1,32 @@
 import type { RollupError } from 'rollup';
+import type { CompilerError } from '@pwc/compiler';
 
 export function createRollupError(
   id: string,
-  error: SyntaxError,
+  error: SyntaxError | CompilerError,
 ): RollupError {
-  return {
-    id,
-    plugin: 'pwc',
-    message: error.message,
-    parserError: error,
-  };
+  if ('code' in error) {
+    return {
+      id,
+      plugin: 'pwc',
+      pluginCode: String(error.code),
+      message: error.message,
+      frame: error.loc!.source,
+      parserError: error,
+      loc: error.loc
+        ? {
+          file: id,
+          line: error.loc.start.line,
+          column: error.loc.start.column,
+        }
+        : undefined,
+    };
+  } else {
+    return {
+      id,
+      plugin: 'pwc',
+      message: error.message,
+      parserError: error,
+    };
+  }
 }

From f63b1c7eb8ddd525bbc631f6247980bd88f12af3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=80=86=E8=91=B5?= <xianyong.yxy@alibaba-inc.com>
Date: Mon, 16 May 2022 17:38:30 +0800
Subject: [PATCH 3/3] build: update parse5 version

---
 pnpm-lock.yaml | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8cd4483..13e868d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -228,7 +228,6 @@ importers:
 
   packages/pwc-compiler:
     specifiers:
-      '@babel/core': ^7.17.9
       '@babel/generator': ^7.17.7
       '@babel/parser': ^7.17.9
       '@babel/plugin-proposal-decorators': ^7.17.2
@@ -238,7 +237,7 @@ importers:
       '@rollup/plugin-typescript': ^8.3.1
       '@swc/helpers': ^0.3.8
       core-js: ^3.21.1
-      parse5: ^6.0.1
+      parse5: ^7.0.0
       postcss: ^8.4.12
       regenerator-runtime: ^0.13.9
       rfdc: ^1.3.0
@@ -246,14 +245,13 @@ importers:
       source-map: ^0.7.3
       tslib: ^2.3.1
     dependencies:
-      '@babel/core': 7.17.10
       '@babel/generator': 7.17.10
       '@babel/parser': 7.17.10
       '@babel/plugin-proposal-decorators': 7.17.9_@babel+core@7.17.10
       '@babel/traverse': 7.17.10
       '@babel/types': 7.17.10
       '@swc/helpers': 0.3.13
-      parse5: 6.0.1
+      parse5: 7.0.0
       postcss: 8.4.13
       rfdc: 1.3.0
       source-map: 0.7.3
@@ -5940,6 +5938,11 @@ packages:
     engines: {node: '>=0.12'}
     dev: true
 
+  /entities/4.3.0:
+    resolution: {integrity: sha512-/iP1rZrSEJ0DTlPiX+jbzlA3eVkY/e8L8SozroF395fIqE3TYF/Nz7YOMAawta+vLmyJ/hkGNNPcSbMADCCXbg==}
+    engines: {node: '>=0.12'}
+    dev: false
+
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -9968,6 +9971,12 @@ packages:
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
 
+  /parse5/7.0.0:
+    resolution: {integrity: sha512-y/t8IXSPWTuRZqXc0ajH/UwDj4mnqLEbSttNbThcFhGrZuOyoyvNBO85PBp2jQa55wY9d07PBNjsK8ZP3K5U6g==}
+    dependencies:
+      entities: 4.3.0
+    dev: false
+
   /parseurl/1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}