add example (#88)

* add prettier * fix format * add jest watch * update eslint env * upgrade webpack * add simple example * add e2e * switch to github actions
intlify · Apr 7, 2020 · 1af3698 · 1af3698
1 parent 95f387d
commit 1af3698
Show file tree

Hide file tree

Showing 22 changed files with 2,186 additions and 383 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,23 +2,33 @@
 
 module.exports = {
   root: true,
+  globals: {
+    page: true,
+    browser: true,
+    context: true,
+    jestPuppeteer: true
+  },
   env: {
     node: true,
     jest: true
   },
   extends: [
-    'plugin:vue-libs/recommended'
-  ],
-  plugins: [
-    '@typescript-eslint'
+    'plugin:vue-libs/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended'
   ],
+  plugins: ['@typescript-eslint'],
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
     sourceType: 'module'
   },
   rules: {
-    'no-unused-vars': 'off', // HACK: due to override with @typescript-eslint/no-unused-vars
-    '@typescript-eslint/no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }]
+    'object-curly-spacing': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/member-delimiter-style': 'off',
+    '@typescript-eslint/no-use-before-define': 'off'
   }
 }
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,28 @@
+name: Test
+on:
+  push:
+    branches-ignore:
+      - gh-pages
+  pull_request:
+env:
+  CI: true
+
+jobs:
+  test:
+    name: "Test on Node.js ${{ matrix.node }} OS: ${{matrix.os}}"
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [10, 12]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install
+        run: yarn install
+      - name: Test
+        run: yarn test
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+lib
+coverage
+tsconfig.json
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: "none"
+endOfLine: "auto"
+arrowParens: "avoid"
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,9 +1,9 @@
 {
-    "eslint.validate": [
-        "javascript",
-        {"language": "typescript", "autoFix": true}
-    ],
-    "eslint.packageManager": "yarn",
-    "eslint.enable": true,
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "eslint.validate": [
+    "javascript",
+    { "language": "typescript", "autoFix": true }
+  ],
+  "eslint.packageManager": "yarn",
+  "eslint.enable": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/e2e/example.test.js b/e2e/example.test.js
@@ -0,0 +1,9 @@
+describe('example', () => {
+  beforeAll(async () => {
+    await page.goto('http://localhost:8080/')
+  })
+
+  test('rendering', async () => {
+    await expect(page).toMatch('こんにちは、世界！')
+  })
+})
diff --git a/example/App.vue b/example/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <p>{{ $t('hello') }}</p>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "hello": "hello, world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>vue-i18n-loader example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/example/main.js b/example/main.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import App from './App.vue'
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: 'ja',
+  messages: {}
+})
+
+new Vue({
+  i18n,
+  el: '#app',
+  render: h => h(App)
+})
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require('path')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  mode: 'development',
+  entry: path.resolve(__dirname, './main.js'),
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/dist/'
+  },
+  devServer: {
+    stats: 'minimal',
+    contentBase: __dirname
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader'
+      },
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        use: [path.resolve(__dirname, '../lib/index.js')]
+      }
+    ]
+  },
+  plugins: [new VueLoaderPlugin()]
+}
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  server: {
+    port: 8080,
+    command:
+      'webpack-dev-server --config example/webpack.config.js --inline --hot'
+  },
+  launch: {
+    dumpio: false,
+    headless: process.env.HEADLESS !== 'false'
+  },
+  browser: 'chromium',
+  browserContext: 'default'
+}
diff --git a/jest.config.js b/jest.config.js
@@ -3,13 +3,15 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
-  coveragePathIgnorePatterns: [
-    'node_modules',
-    '<rootDir>/test/*.*'
-  ],
+  coveragePathIgnorePatterns: ['node_modules', '<rootDir>/test/*.*'],
+  testMatch: ['<rootDir>/test/**/*(*.)@(spec|test).[tj]s?(x)'],
   globals: {
     'ts-jest': {
       diagnostics: false
     }
-  }
+  },
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname'
+  ]
 }