(vue): flow to typescript

Author: lx1036

vue/template-compiler-playground/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

vue/template-compiler-playground/vue3-compiler/babel.config.js

@@ -1,6 +1,7 @@
-// ../../../node_modules/.bin/webpack-dev-server ./index.ts --config ./webpack.config.js
-
 /**
+ * ../../../node_modules/.bin/jest -c ./jest.config.js
+ * ../../../node_modules/.bin/webpack-dev-server ./index.ts --config ./webpack.config.js
+ *
  * @see https://github.com/vuejs/vue/blob/master/src/platforms/web/compiler/index.js
  */
 

vue/template-compiler-playground/vue3-compiler/index.ts

@@ -114,7 +114,7 @@ module.exports = {
   // A list of paths to directories that Jest should use to search for files in
   roots: [
     // "<rootDir>"
-    "test"
+    "./test"
   ],
 
   // Allows you to use a custom runner instead of Jest's default test runner

vue/template-compiler-playground/vue3-compiler/jest.config.js

@@ -0,0 +1,45 @@
+import {baseOptions} from "../platform-web-compiler/options";
+import {parse} from "../vue3-template-compiler/parser";
+
+describe('parser', () => {
+  it('simple element', () => {
+    const ast = parse('<h1>hello world</h1>', baseOptions);
+    expect(ast.tag).toBe('h1');
+    expect(ast.plain).toBe(true);
+    expect(ast.children[0].text).toBe('hello world');
+  });
+  
+  it('interpolation in element', () => {
+    const ast = parse('<h1>{{msg}}</h1>', baseOptions);
+    expect(ast.tag).toBe('h1');
+    expect(ast.plain).toBe(true);
+    expect(ast.children[0].expression).toBe('_s(msg)');
+  });
+  
+  it('child elements', () => {
+    const ast = parse('<ul><li>hello world</li></ul>', baseOptions);
+    expect(ast.tag).toBe('ul');
+    expect(ast.plain).toBe(true);
+    expect(ast.children[0].tag).toBe('li');
+    expect(ast.children[0].plain).toBe(true);
+    expect(ast.children[0].children[0].text).toBe('hello world');
+    expect(ast.children[0].parent).toBe(ast);
+  });
+  
+  it('unary element', () => {
+    const ast = parse('<hr>', baseOptions);
+    expect(ast.tag).toBe('hr');
+    expect(ast.plain).toBe(true);
+    expect(ast.children.length).toBe(0);
+  });
+  
+  it('camelCase element', () => {
+    const ast = parse('<MyComponent><p>hello world</p></MyComponent>', baseOptions)
+    expect(ast.tag).toBe('MyComponent')
+    expect(ast.plain).toBe(true)
+    expect(ast.children[0].tag).toBe('p')
+    expect(ast.children[0].plain).toBe(true)
+    expect(ast.children[0].children[0].text).toBe('hello world')
+    expect(ast.children[0].parent).toBe(ast)
+  })
+});

vue/template-compiler-playground/vue3-compiler/test/parser.spec.js

@@ -39,6 +39,7 @@ type StartTagMatch = {
 export const parseHTML = (html: string, options: any) => {
   let last: string, lastTag: string;
   let index = 0;
+  const expectHTML = options.expectHTML;
 
   /**
    *

vue/template-compiler-playground/vue3-compiler/test/parser.spec.ts

@@ -1,10 +1,48 @@
-// Parse
-
 import {ASTElement, CompilerOptions} from '../types';
+import {parseHTML} from "./html-parser";
+
+
+function makeAttributesMap(attributes: Array<any>) {
+  const map: any = {};
+  
+  for (let i = 0, l = attributes.length; i < l; i++) {
+    map[attributes[i].name] = attributes[i].value;
+  }
+  
+  return map;
+}
+
+function createASTElement(tag: string, attributes: Array<any>, parent: ASTElement) {
+  return {
+    type: 1,
+    tag,
+    attributesList: attributes,
+    attributesMap: makeAttributesMap(attributes),
+    rawAttributesMap: {},
+    parent,
+    children: []
+  }
+}
+
+
 
 /**
  * Convert HTML string to AST.
  */
-export const parse = (template: string, options: CompilerOptions): ASTElement => {
-
+export const parse = (template: string, options: any): ASTElement => {
+  let root: any;
+  let currentParent: any;
+  
+  parseHTML(template, {
+    expectHTML: options.expectHTML,
+    start(tag: any, attributes: Array<any>) {
+      let element = createASTElement(tag, attributes, currentParent);
+      
+      if (!root) {
+        root = element;
+      }
+    }
+  });
+  
+  return root;
 };

vue/template-compiler-playground/vue3-compiler/vue3-template-compiler/parser/html-parser.ts

@@ -1,11 +1,67 @@
-import {
-  ASTDirective,
-  ASTElementHandlers,
-  ASTIfCondition,
-  ASTNode, DirectiveFunction,
-  ModuleOptions,
-  SSROptimizability
-} from "vue-template-compiler";
+export type ASTAttr = {
+  name: string;
+  value: any;
+  dynamic?: boolean;
+  start?: number;
+  end?: number
+};
+
+interface ModuleOptions {
+  preTransformNode: (el: ASTElement) => ASTElement | undefined;
+  transformNode: (el: ASTElement) => ASTElement | undefined;
+  postTransformNode: (el: ASTElement) => void;
+  genData: (el: ASTElement) => string;
+  transformCode?: (el: ASTElement, code: string) => string;
+  staticKeys?: string[];
+}
+
+export interface ASTIfCondition {
+  exp: string | undefined;
+  block: ASTElement;
+}
+
+export interface ASTElementHandler {
+  value: string;
+  params?: any[];
+  modifiers: ASTModifiers | undefined;
+}
+
+export interface ASTElementHandlers {
+  [key: string]: ASTElementHandler | ASTElementHandler[];
+}
+
+export interface ASTModifiers {
+  [key: string]: boolean;
+}
+
+export interface ASTDirective {
+  name: string;
+  rawName: string;
+  value: string;
+  arg: string | undefined;
+  modifiers: ASTModifiers | undefined;
+}
+type DirectiveFunction = (node: ASTElement, directiveMeta: ASTDirective) => void;
+
+export interface ASTExpression {
+  type: 2;
+  expression: string;
+  text: string;
+  tokens: (string | Record<string, any>)[];
+  static?: boolean;
+  // 2.4 ssr optimization
+  // ssrOptimizability?: SSROptimizability;
+}
+
+export interface ASTText {
+  type: 3;
+  text: string;
+  static?: boolean;
+  isComment?: boolean;
+  // 2.4 ssr optimization
+  // ssrOptimizability?: SSROptimizability;
+}
+
 
 export interface ASTElement {
   type: 1;
@@ -79,7 +135,7 @@ export interface ASTElement {
   wrapListeners?: (code: string) => string;
 
   // 2.4 ssr optimization
-  ssrOptimizability?: SSROptimizability;
+  // ssrOptimizability?: SSROptimizability;
 
   // weex specific
   appendAsTree?: boolean;
@@ -102,3 +158,6 @@ export interface CompiledResult<ErrorType> {
 }
 
 
+
+
+export type ASTNode = ASTElement | ASTText | ASTExpression;

vue/template-compiler-playground/vue3-compiler/vue3-template-compiler/parser/index.ts

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};