component tag renaming

examples/multiple/project1/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "dependencies": {
     "typescript": "^3.9.7",
-    "vue": "^3.0.0-rc.4"
+    "vue": "^3.0.0-rc.5"
   },
   "version": "0.1.0-alpha.0"
 }

examples/multiple/project2/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "dependencies": {
     "typescript": "^3.9.7",
-    "vue": "^3.0.0-rc.4"
+    "vue": "^3.0.0-rc.5"
   },
   "version": "0.1.0-alpha.0"
 }

examples/simple/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "dependencies": {
     "typescript": "^3.9.7",
-    "vue": "^3.0.0-rc.4"
+    "vue": "^3.0.0-rc.5"
   },
   "version": "0.1.0-alpha.0"
 }

examples/simple/src/App.vue

@@ -1,20 +1,33 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
-import Bar from './Bar.vue'
+import { Bar as TestComp } from './components'
 
 export default defineComponent({
-  components: { Bar },
-  setup() {
-    return { bar: 1 }
+  components: {
+    Foo: TestComp,
+    TestComp,
+    'foo-bar': TestComp
+  },
+  props: {
+    foo: String,
+    bar: {
+      type: String,
+      required: true
+    }
   }
 })
 </script>
 
 <template>
-  <Bar v-if="bar" :test="5"  #default="{ test }">
-      {{ test }}
-  </Bar>
-  <Bar v-else :test="5"  #default="{ test }">
-      {{ test }}
-  </Bar>
+  <Foo>
+      <TestComp>
+        <foo-bar />
+      </TestComp>
+      <TestComp>
+        <foo-bar />
+      </TestComp>
+      <TestComp>
+        <foo-bar />
+      </TestComp>
+  </Foo>
 </template>

examples/simple/src/App2.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import TestComp from './Bar.vue'
+
+export default defineComponent({
+  components: {
+    TestComp,
+  }
+})
+</script>
+
+<template>
+  <TestComp>Try</TestComp>
+  <TestComp>refacotring!</TestComp>
+  <TestComp/>
+</template>

examples/simple/src/components.ts

@@ -0,0 +1,3 @@
+import Bar from './Bar.vue'
+
+export { Bar }

package.json

@@ -9,6 +9,7 @@
     "build": "rollup -c --environment BUILD:production",
     "prepublishOnly": "npm run build",
     "beta:release:packages": "npm run release:packages -- prerelease",
+    "prerelease:packages": "tsc --noEmit",
     "release:packages": "pnpm recursive exec npm version",
     "postrelease:packages": "pnpm run build && git commit -am 'chore: release' && pnpm recursive publish --access public --tag latest"
   },

packages/analyze/bin/analyze.js

@@ -1,89 +1,88 @@
 #!/usr/bin/env node
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 
-const glob = require('fast-glob')
-const hash = require('hash-sum')
-const Path = require('path')
-const FS = require('fs')
-const program = require('commander')
-const { inspect } = require('../dist/analyze')
-const { codeFrameColumns } = require('@babel/code-frame')
-const { highlight } = require('cli-highlight')
+const glob = require('fast-glob');
+const hash = require('hash-sum');
+const Path = require('path');
+const FS = require('fs');
+const program = require('commander');
+const { createFullAnalyzer } = require('../dist/analyze');
+const { codeFrameColumns } = require('@babel/code-frame');
+const { highlight } = require('cli-highlight');
 
 program
   .arguments('[dir]')
   .option('-o, --out-file <fileName>', 'output file name')
   .option('-p, --prod', 'use file name hash as component id')
   .action(async (dir = process.cwd(), options) => {
-    const files = await glob('**/*.vue', {
-      cwd: dir,
-      absolute: false,
-      ignore: ['**/node_modules/**', '**/dist/**'],
-    })
+    const isFile = FS.statSync(dir).isFile();
+    dir = Path.isAbsolute(dir) ? dir : Path.resolve(process.cwd(), dir)
+
+    const files = isFile
+      ? [dir]
+      : await glob('**/*.vue', {
+          cwd: dir,
+          absolute: false,
+          ignore: ['**/node_modules/**', '**/dist/**'],
+        });
+
+    if (isFile) {
+      dir = Path.dirname(dir);
+    }
 
-    const meta = {}
+    const meta = {};
 
+    const analyzer = createFullAnalyzer();
     await Promise.all(
-      files.map(async file => {
-        const filePath = Path.resolve(dir, file)
+      files.map(async (file) => {
+        const filePath = Path.resolve(dir, file);
         try {
-          const errors = []
-          const ast = await inspect(filePath, {
-            onError(error) {
-              errors.push(error)
-            },
-          })
+          const errors = [];
+          const ast = analyzer.analyze(await FS.promises.readFile(filePath, { encoding: 'utf-8' }), filePath);
 
-          const id = options.prod ? hash(file) : file
+          const id = options.prod ? hash(file) : file;
 
-          meta[id] = ast
+          meta[id] = ast;
 
           if (errors.length) {
-            await printErrors(file, errors, filePath)
+            await printErrors(file, errors, filePath);
           }
         } catch (error) {
           if (error.loc) {
-            await printErrors(file, [error], filePath)
+            await printErrors(file, [error], filePath);
           } else {
-            console.error(
-              `${file} aborted due to error "${error.message}"`,
-              error
-            )
+            console.error(`${file} aborted due to error "${error.message}"`, error);
           }
         }
       })
-    )
+    );
 
-    const content = JSON.stringify(meta, null, 2)
+    const content = JSON.stringify(meta, null, 2);
 
     if (options.out) {
-      const outDir = Path.dirname(options.out)
+      const outDir = Path.dirname(options.out);
 
-      if (outDir) await FS.promises.mkdir(outDir, { recursive: true })
-      await FS.promises.writeFile(options.out, content)
+      if (outDir) await FS.promises.mkdir(outDir, { recursive: true });
+      await FS.promises.writeFile(options.out, content);
     }
 
-    console.log(highlight(content, { language: 'json' }))
-  })
+    console.log(highlight(content, { language: 'json' }));
+  });
 
-program.parse(process.argv)
+program.parse(process.argv);
 
 /**
  *
  * @param {string} file
- * @param {Error[]} errors
+ * @param {any[]} errors
  * @param {string} filePath
  */
 async function printErrors(file, errors, filePath) {
-  const contents = await FS.promises.readFile(filePath, { encoding: 'utf8' })
-  console.error(`Errors in ${file}\n` + ''.padStart(80, '-'))
+  const contents = await FS.promises.readFile(filePath, { encoding: 'utf8' });
+  console.error(`Errors in ${file}\n` + ''.padStart(80, '-'));
 
   for (const error of errors) {
-    console.error(
-      `${error.block ? `(${error.block}, language=${error.lang})` : ''} ${
-        error.message
-      }`
-    )
+    console.error(`${error.block ? `(${error.block}, language=${error.lang})` : ''} ${error.message}`);
 
     if (error.loc) {
       console.error(
@@ -94,10 +93,10 @@ async function printErrors(file, errors, filePath) {
             : { start: error.loc }, // babel errors
           { highlightCode: true, message: error.message }
         )
-      )
-      console.error()
+      );
+      console.error();
     }
   }
 
-  console.error()
+  console.error();
 }

packages/analyze/package.json

@@ -26,11 +26,16 @@
   },
   "homepage": "https://github.com/znck/vue-developer-experience#readme",
   "dependencies": {
+    "@babel/code-frame": "^7.10.4",
     "@babel/parser": "^7.10.5",
     "@babel/traverse": "^7.11.0",
     "@babel/types": "^7.10.5",
     "@vue/compiler-core": "^3.0.0-rc.5",
-    "@vue/compiler-sfc": "^3.0.0-rc.5"
+    "@vue/compiler-sfc": "^3.0.0-rc.5",
+    "cli-highlight": "^2.1.4",
+    "commander": "^6.0.0",
+    "fast-glob": "^3.2.4",
+    "hash-sum": "^2.0.0"
   },
   "devDependencies": {
     "typescript": "^3.9.7"

packages/analyze/src/analyzer.ts

@@ -52,16 +52,17 @@ export function createAnalyzer(plugins: Plugin[], options: Partial<Context['pars
 function processSFC(context: Context) {
   const { script, template, styles, customBlocks } = context.descriptor;
 
-  function call<T extends SFCBlock>(kind: string, block: T) {
+  function call<T extends SFCBlock>(block: T) {
+    const kind = block.type;
     context.plugins.forEach(({ blocks }) => {
       if (blocks && kind in blocks) {
         blocks[kind](block, context);
       }
     });
   }
 
-  if (script) call('script', script);
-  if (template) call('script', template);
-  styles.forEach(call.bind(null, 'style'));
-  customBlocks.forEach((block) => call(block.type, block));
+  if (script) call(script);
+  if (template) call(template);
+  styles.forEach(call);
+  customBlocks.forEach((block) => call(block));
 }

packages/analyze/src/analyzers/ScriptBlockAnalyzer.ts

@@ -34,12 +34,14 @@ export function createScriptContext(content: string, context: Context, block?: S
   const ast = parse(content, {
     ...context.parsers.babel,
     plugins: Array.from(new Set(plugins)),
+    ranges: true,
   });
 
   return {
     ...context,
     mode: script.setup ? 'setup' : 'module',
     ast: ast,
+    source: content,
     block: script,
   };
 }
@@ -93,7 +95,7 @@ function processScript(context: ScriptAnalyzerContext) {
   }
 
   function processOptions(options$: NodePath<ObjectExpression>) {
-    const properties$ = options$.get('properties');
+    const properties$ = options$.get('properties') as NodePath[];
 
     properties$.forEach((property$) => {
       if (property$.isObjectMember()) {
@@ -121,14 +123,14 @@ function processScript(context: ScriptAnalyzerContext) {
     });
   }
 
-  traverse(context.ast, {
+  traverse(context.ast as any, {
     enter(path) {
-      call(enterHandlers, path);
+      call(enterHandlers, path as any);
     },
     exit(path) {
-      call(exitHandlers, path);
+      call(exitHandlers, path as any);
     },
-    ExportDefaultDeclaration(path: NodePath<ExportDefaultDeclaration>) {
+    ExportDefaultDeclaration(path) {
       if (context.mode === 'setup') return;
       const d$ = path.get('declaration');
       /**
@@ -148,7 +150,7 @@ function processScript(context: ScriptAnalyzerContext) {
          */
         const { callee, arguments: args } = declaration$.node;
         const args$ = declaration$.get('arguments');
-        let options$ = Array.isArray(args$) ? args$[0] : args$;
+        let options$ = (Array.isArray(args$) ? args$[0] : args$) as unknown as NodePath;
 
         /**
          * Matches:
@@ -163,7 +165,7 @@ function processScript(context: ScriptAnalyzerContext) {
             call(declarationHandlers, declaration$ as any);
             call(optionsHandlers, options$ as any);
             processOptions(options$ as any);
-          } else if (options$.isFunctionExpression() || options$.isArrowFunctionExpression()) {
+          } else if (options$.isArrowFunctionExpression() || options$.isFunctionExpression()) {
             /**
              * Matches:
              * export default defineComponent(() => {...})