feat(): add vue starters (ionic-team#1452)

.circleci/config.yml

@@ -11,19 +11,31 @@ aliases:
         rm google-chrome.deb
 
   - &restore-cache-src
-      key: dependency-cache-{{ checksum "package.json" }}-1
+      key: dependency-cache-{{ checksum "package.json" }}-2
 
   - &save-cache-src
-      key: dependency-cache-{{ checksum "package.json" }}-1
+      key: dependency-cache-{{ checksum "package.json" }}-2
       paths:
         - node_modules
 
+  - &restore-cache-vue-starters
+      key: dependency-cache-{{ checksum "starter-checksum-vue.sha256" }}-2
+
+  - &save-cache-vue-starters
+      key: dependency-cache-{{ checksum "starter-checksum-vue.sha256" }}-2
+      paths:
+        - build/vue-official-list/node_modules
+        - build/vue-official-blank/node_modules
+        - build/vue-official-sidemenu/node_modules
+        - build/vue-official-tabs/node_modules
+
   - &restore-cache-react-starters
       key: dependency-cache-{{ checksum "starter-checksum-react.sha256" }}-1
 
   - &save-cache-react-starters
       key: dependency-cache-{{ checksum "starter-checksum-react.sha256" }}-1
       paths:
+        - build/react-official-list/node_modules
         - build/react-official-blank/node_modules
         - build/react-official-sidemenu/node_modules
         - build/react-official-tabs/node_modules
@@ -34,6 +46,7 @@ aliases:
   - &save-cache-angular-starters
       key: dependency-cache-{{ checksum "starter-checksum-angular.sha256" }}-1
       paths:
+        - build/angular-official-list/node_modules
         - build/angular-official-blank/node_modules
         - build/angular-official-sidemenu/node_modules
         - build/angular-official-tabs/node_modules
@@ -90,6 +103,15 @@ jobs:
           root: /tmp/workspace
           paths:
             - "*"
+
+  test_vue:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - restore_cache: *restore-cache-vue-starters
+      - run: npm run starters:test -- --type=vue
+      - save_cache: *save-cache-vue-starters
 
   test_react:
     <<: *defaults
@@ -140,6 +162,9 @@ workflows:
   build:
     jobs:
       - build
+      - test_vue:
+          requires:
+            - build
       - test_react:
           requires:
             - build
@@ -154,6 +179,7 @@ workflows:
             - build
       - deploy:
           requires:
+            - test_vue
             - test_react
             - test_angular
             - test_ionic_angular

src/lib/build.ts

@@ -13,7 +13,7 @@ export const STARTER_TYPE_OFFICIAL = 'official';
 export const STARTER_TYPE_COMMUNITY = 'community';
 export const REPO_DIRECTORY = path.resolve(path.dirname(path.dirname(__dirname)));
 export const INTEGRATIONS_DIRECTORY = path.resolve(REPO_DIRECTORY, 'integrations');
-export const IONIC_TYPE_DIRECTORIES = ['ionic1', 'ionic-angular', 'angular', 'react'];
+export const IONIC_TYPE_DIRECTORIES = ['ionic1', 'ionic-angular', 'angular', 'react', 'vue'];
 
 export const BUILD_DIRECTORY = path.resolve(REPO_DIRECTORY, 'build');
 export const STARTERS_LIST_PATH = path.resolve(BUILD_DIRECTORY, 'starters.json');

vue/base/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

vue/base/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+}

vue/base/.gitignore

@@ -0,0 +1,31 @@
+# Specifies intentionally untracked files to ignore when using Git
+# http://git-scm.com/docs/gitignore
+
+*~
+*.sw[mnpcod]
+.tmp
+*.tmp
+*.tmp.*
+*.sublime-project
+*.sublime-workspace
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+$RECYCLE.BIN/
+
+*.log
+log.txt
+npm-debug.log*
+
+/.idea
+/.ionic
+/.sass-cache
+/.sourcemaps
+/.versions
+/.vscode
+/coverage
+/dist
+/node_modules
+/platforms
+/plugins
+/www

vue/base/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

vue/base/cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

vue/base/ionic.config.json

@@ -0,0 +1,6 @@
+{
+  "name": "ionic-app-base",
+  "app_id": "",
+  "type": "vue",
+  "integrations": {}
+}

vue/base/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+  transform: {
+    '^.+\\.vue$': 'vue-jest'
+  }
+}

vue/base/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ionic-app-base",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@ionic/vue": "^5.4.0",
+    "@ionic/vue-router": "^5.4.0",
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0-0",
+    "vue-router": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.19",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0-0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^2.0.0-0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0-0",
+    "typescript": "~3.9.3",
+    "vue-jest": "^5.0.0-0"
+  }
+}

vue/base/public/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
+
+    <base href="/" />
+
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="shortcut icon" type="image/png" href="<%= BASE_URL %>assets/icon/favicon.png" />
+
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+
+</html>
+

vue/base/src/main.ts

@@ -0,0 +1,32 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router';
+
+import { IonicVue } from '@ionic/vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+const app = createApp(App)
+  .use(IonicVue)
+  .use(router);
+
+router.isReady().then(() => {
+  app.mount('#app');
+});

vue/base/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
+}