⭐ new(api): reflect locale message meta from SFC file info

intlify · Jul 31, 2019 · ef674ce · ef674ce
1 parent dd5e2db
commit ef674ce
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 9 deletions.
diff --git a/src/reflector.ts b/src/reflector.ts
@@ -1,5 +1,42 @@
-import { LocaleMessageMeta } from '../types'
+import { LocaleMessageMeta, SFCFileInfo } from '../types'
+import { VueTemplateCompiler } from '@vue/component-compiler-utils/dist/types'
 
-export default function getLocaleMessageMeta (components: string[]): LocaleMessageMeta[] {
-  return []
+import { parse } from '@vue/component-compiler-utils'
+import * as compiler from 'vue-template-compiler'
+import path from 'path'
+
+import { debug as Debug } from 'debug'
+const debug = Debug('vue-i18n-locale-message:reflector')
+
+export default function reflectLocaleMessageMeta (basePath: string, components: SFCFileInfo[]): LocaleMessageMeta[] {
+  return components.map(target => {
+    const desc = parse({
+      source: target.content,
+      filename: target.path,
+      compiler: compiler as VueTemplateCompiler
+    })
+    const { contentPath, component, messageHierarchy } = parsePath(basePath, target.path)
+    const cm = ''
+    return {
+      contentPath,
+      content: cm,
+      blocks: desc.customBlocks,
+      component,
+      messageHierarchy
+    }
+  })
+}
+
+function parsePath (basePath: string, targetPath: string) {
+  const parsed = path.parse(targetPath)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, target] = parsed.dir.split(basePath)
+  const parsedTargetPath = target.split(path.sep)
+  parsedTargetPath.shift()
+  debug(`parsePath: contentPath = ${targetPath}, component = ${parsed.name}, messageHierarchy = ${parsedTargetPath}`)
+  return {
+    contentPath: targetPath,
+    component: parsed.name,
+    messageHierarchy: parsedTargetPath
+  }
 }
diff --git a/test/reflector.test.ts b/test/reflector.test.ts
@@ -1,5 +1,43 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import getLocaleMessageMeta from '../src/reflector'
+import { SFCFileInfo } from '../types'
+import reflectLocaleMessageMeta from '../src/reflector'
 
-test('getLocaleMessageMeta', () => {
+test('reflectLocaleMessageMeta', () => {
+  const componentInfo: SFCFileInfo = {
+    path: '/path/to/project1/src/components/common/Modal.vue',
+    content: `
+      <template>
+        <!-- template contents is here ... -->
+      </template>
+      
+      <script>
+        // script codes is here ...
+        export default {}
+      </script>
+
+      <style scoped>
+        // css style codes is here ...
+      </style>
+
+      <i18n>
+      {
+        "en": {
+          "ok": "OK",
+          "cancel": "Cancel"
+        },
+        "ja": {
+          "ok": "OK",
+          "cancel": "キャンセル"
+        }
+      }
+      </i18n>
+    `
+  }
+
+  const metaInfo = reflectLocaleMessageMeta('/path/to/project1/src', [componentInfo])
+  expect(metaInfo.length).toBe(1)
+  const [meta] = metaInfo
+  expect(meta.contentPath).toBe(componentInfo.path)
+  expect(meta.component).toBe('Modal')
+  expect(meta.messageHierarchy).toEqual(['components', 'common'])
+  expect(meta.blocks.length).toBe(1)
 })
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -1,3 +1,5 @@
+import { SFCCustomBlock } from '@vue/component-compiler-utils'
+
 /**
  *  Locale Message Recursive Structure
  *    e.g.
@@ -29,11 +31,23 @@ export interface LocaleMessageObject { [key: string]: LocaleMessage }
 export type LocaleMessages = { [key: string]: LocaleMessageObject }
 
 /**
- *  Locale Message Meta to squeeze / infuse.
+ *  SFC (Single-file component) file info
  *    e.g.
  *    {
- *      contentPath: '/path/to/project1/src/components/common/Modal.vue',
+ *      path: '/path/to/project1/src/components/common/Modal.vue',
  *      content: `
+ *        <template>
+ *          <!-- template contents is here ... -->
+ *        </template>
+ *
+ *        <script>
+ *          // script codes is here ...
+ *        </script>
+ *
+ *        <style scoped>
+ *          // css style codes is here ...
+ *        </style>
+ *
  *        <i18n>
  *        {
  *          "en": {
@@ -47,14 +61,47 @@ export type LocaleMessages = { [key: string]: LocaleMessageObject }
  *        }
  *        </i18n>
  *      `,
+ *    }
+ */
+
+export interface SFCFileInfo {
+  path: string
+  content: string
+}
+
+/**
+ *  Locale Message Meta to squeeze / infuse.
+ *    e.g.
+ *    {
+ *      contentPath: '/path/to/project1/src/components/common/Modal.vue',
+ *      blocks: [{
+ *        type: 'i18n',
+ *        content: `
+ *        {
+ *          "en": {
+ *            "ok": "OK",
+ *            "cancel": "Cancel"
+ *          },
+ *          "ja": {
+ *            "ok": "OK",
+ *            "cancel": "キャンセル"
+ *          }
+ *        }
+ *        `,
+ *        attrs: { ... },
+ *        start: 10,
+ *        end: 30,
+ *        map: { ... }
+ *      }, ...],
  *      component: 'Modal',
  *      messageHierarchy: ['components', 'common', 'Modal']
  *    }
  */
 
-export type LocaleMessageMeta = {
+export interface LocaleMessageMeta {
   contentPath: string
   content: string
+  blocks: SFCCustomBlock[]
   component: string
   messageHierarchy: string[]
 }