feat: core implementation (#1)

* feat: core implementation

* fix lint errors

* add codecov badge

* add more tests

* remove unneccesary modules

* tweak tests

* add examples

* update docs

Author: kazupon

.gitignore

@@ -1,5 +1,6 @@
 coverage
 node_modules
+example/components.esm.js
 .DS_Store
 lib
 *.log

.npmignore

@@ -5,4 +5,5 @@
 coverage
 __snapshots__
 test
+example/components.esm.js
 .vscode

README.md

@@ -1,9 +1,129 @@
 # :globe_with_meridians: rollup-plugin-vue-i18n
 
 [![CircleCI](https://circleci.com/gh/intlify/rollup-plugin-vue-i18n.svg?style=svg)](https://circleci.com/gh/intlify/rollup-plugin-vue-i18n)
+[![npm](https://img.shields.io/npm/v/@intlify/rollup-plugin-vue-i18n.svg)](https://www.npmjs.com/package/@intlify/rollup-plugin-vue-i18n)
+[![codecov](https://codecov.io/gh/intlify/rollup-plugin-vue-i18n/branch/master/graph/badge.svg)](https://codecov.io/gh/intlify/rollup-plugin-vue-i18n)
 
 vue-i18n rollup plugin for custom blocks
 
+
+## :exclamation: Requirement
+
+You need to install the follwoing:
+
+- [email protected] later
+
+If you use rollup-plugin-vue, We recommend you should read the [docs](https://rollup-plugin-vue.vuejs.org/)
+
+
+## :cd: Installation
+
+npm:
+```bash
+$ npm i --save-dev @rollup/plugin-json
+$ npm i --save-dev @rollup/plugin-yaml # if you use locale messages with YAML format
+$ npm i --save-dev @intlify/rollup-plugin-vue-i18n
+```
+
+yarn:
+```bash
+$ yarn add -D @rollup/plugin-json
+$ yarn add -D @rollup/plugin-yaml # if you use locale messages with YAML format
+$ yarn add -D @intlify/rollup-plugin-vue-i18n
+```
+
+## :rocket: Usages
+
+the below example that `example/Hello.vue` have `i18n` custom block:
+
+```vue
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'Hello'
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "hello": "Hello World!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+```
+
+If you would like to bundle as common library with rollup, you can configure the following for ES Module:
+
+```js
+const vue = require('rollup-plugin-vue')
+const yaml = require('@rollup/plugin-yaml')
+const json = require('@rollup/plugin-json')
+const { default: i18n } = require('../lib/index')
+
+export default {
+  input: './example/index.js',
+  output: {
+    format: 'esm',
+    file: './example/components.esm.js'
+  },
+  external: [
+    // Externalize so that the output code is readable.
+    'vue',
+    'vue-runtime-helpers',
+    'vue-i18n'
+  ],
+  plugins: [
+    yaml(),
+    json(),
+    i18n(),
+    vue({
+      customBlocks: ['i18n']
+    })
+  ]
+}
+```
+
+### Locale Messages formatting
+
+You can be used by specifying the following format in the `lang` attribute:
+
+- json (default)
+- yaml
+
+example `yaml` foramt:
+
+```vue
+<i18n lang="yaml">
+en:
+  hello: "Hello World!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+```
+
+
+## :warning: Limitations
+Currently, There are the following limitations:
+
+- Not support `json5` format 
+- Not support `locale` attributes
+
+
+## :scroll: Changelog
+Details changes for each release are documented in the [CHANGELOG.md](https://github.com/intlify/rollup-plugin-vue-i18n/blob/master/CHANGELOG.md).
+
+
+## :exclamation: Issues
+Please make sure to read the [Issue Reporting Checklist](https://github.com/inlitify/rollup-plugin-vue-i18n/blob/master/.github/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.
+
+
 ## :copyright: License
 
 [MIT](http://opensource.org/licenses/MIT)

example/Hello.vue

@@ -0,0 +1,20 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'Hello'
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "hello": "Hello World!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>

example/HelloYaml.vue

@@ -0,0 +1,16 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'HelloYaml'
+}
+</script>
+
+<i18n lang="yaml">
+en:
+  hello: "Hello World!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>

example/index.js

@@ -0,0 +1,7 @@
+import Hello from './Hello.vue'
+import HelloYaml from './HelloYaml.vue'
+
+export {
+  Hello,
+  HelloYaml
+}

example/rollup.config.js

@@ -0,0 +1,26 @@
+const vue = require('rollup-plugin-vue')
+const yaml = require('@rollup/plugin-yaml')
+const json = require('@rollup/plugin-json')
+const { default: i18n } = require('../lib/index')
+
+export default {
+  input: './example/index.js',
+  output: {
+    format: 'esm',
+    file: './example/components.esm.js'
+  },
+  external: [
+    // Externalize so that the output code is readable.
+    'vue',
+    'vue-runtime-helpers',
+    'vue-i18n'
+  ],
+  plugins: [
+    yaml(),
+    json(),
+    i18n(),
+    vue({
+      customBlocks: ['i18n']
+    })
+  ]
+}

index.js

@@ -24,21 +24,31 @@
     }
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^4.0.1",
+    "@rollup/plugin-yaml": "^2.0.0",
+    "@types/debug": "^4.1.5",
     "@types/jest": "^24.0.25",
     "@types/node": "^13.1.4",
     "@typescript-eslint/eslint-plugin": "^2.14.0",
     "@typescript-eslint/parser": "^2.14.0",
     "@typescript-eslint/typescript-estree": "^2.14.0",
+    "debug": "^4.1.1",
     "eslint": "^6.8.0",
     "eslint-plugin-vue-libs": "^4.0.0",
     "jest": "^24.9.0",
     "jest-watch-typeahead": "^0.4.2",
     "lerna-changelog": "^1.0.0",
     "opener": "^1.5.1",
-    "shipjs": "0.13.1",
+    "rollup": "^1.28.0",
+    "rollup-plugin-vue": "^5.1.4",
+    "shipjs": "^0.13.1",
     "ts-jest": "^24.2.0",
     "typescript": "^3.7.4",
-    "typescript-eslint-language-service": "^2.0.3"
+    "typescript-eslint-language-service": "^2.0.3",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "peerDependencies": {
+    "vue-template-compiler": "^2.6"
   },
   "engines": {
     "node": ">= 10"
@@ -59,8 +69,9 @@
   },
   "scripts": {
     "build": "tsc -p .",
+    "build:example": "npm run build && rollup -c ./example/rollup.config.js",
     "build:watch": "tsc -p . --watch",
-    "clean": "rm -rf ./coverage",
+    "clean": "rm -rf ./coverage && rm -rf ./example/app.js",
     "coverage": "opener coverage/lcov-report/index.html",
     "lint": "eslint ./src ./test --ext .ts",
     "release:prepare": "shipjs prepare",

package.json

@@ -1,3 +1,27 @@
-export default function (a: number, b: number) {
-  return a + b
+import { Plugin } from 'rollup'
+
+import { debug as Debug } from 'debug'
+const debug = Debug('rollup-plugin-vue-i18n')
+
+export default function i18n (): Plugin {
+  return {
+    name: 'rollup-plugin-vue-i18n',
+    transform (source: string, id: string) {
+      debug('transform id', id)
+      if (/rollup-plugin-vue=i18n/i.test(id)) {
+        return {
+          code:
+            `${source.replace(/export default/, 'const __i18n =')}` +
+            `export default function i18n(Component) {\n` +
+            `  const options = typeof Component === 'function' ? Component.options : Component\n` +
+            `  options.__i18n = options.__i18n || []\n` +
+            `  options.__i18n.push(JSON.stringify(__i18n))\n` +
+            `}`,
+          map: {
+            mappings: ''
+          }
+        }
+      }
+    }
+  }
 }