Sitecore · anastasiya29 · Nov 4, 2021 · Apr 1, 2021 · Apr 2, 2021 · Apr 2, 2021
diff --git a/.eslintrc b/.eslintrc
@@ -2,7 +2,6 @@
   "root": true,
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
     "plugin:jsdoc/recommended",
     "prettier",
     "prettier/@typescript-eslint"
@@ -15,7 +14,11 @@
     "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["@typescript-eslint", "prettier", "jsdoc"],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier",
+    "jsdoc"
+  ],
   "env": {
     "browser": true,
     "node": true,
@@ -29,31 +32,21 @@
     "jsdoc/no-undefined-types": "off",
     "jsdoc/require-returns-type": "off",
     "prettier/prettier": "error",
-    "@typescript-eslint/naming-convention": [
+    "no-use-before-define": "off",
+    "no-useless-escape": "off",
+    "spaced-comment": "error",
+    "curly": [
       "error",
-      {
-        "format": ["PascalCase"],
-        "selector": "typeLike",
-        "custom": {
-          "regex": "^I[A-Z]",
-          "match": false
-        }
-      }
+      "multi-line"
     ],
-    "@typescript-eslint/member-ordering": "error",
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": [
+    "eol-last": [
       "error",
-      { "functions": false, "variables": false }
+      "always"
+    ],
+    "linebreak-style": [
+      "error",
+      "windows"
     ],
-    "@typescript-eslint/typedef": "error",
-    "@typescript-eslint/type-annotation-spacing": "error",
-    "@typescript-eslint/semi": "error",
-    "@typescript-eslint/no-var-requires": "off",
-    "no-useless-escape": "off",
-    "spaced-comment": "error",
-    "curly": ["error", "multi-line"],
-    "eol-last": ["error", "always"],
     "guard-for-in": "error",
     "no-unused-labels": "error",
     "no-caller": "error",
@@ -63,12 +56,24 @@
     "no-eval": "error",
     "dot-notation": "error",
     "no-trailing-spaces": "error",
-    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true
+      }
+    ],
     "brace-style": "error",
-    "quotes": ["error", "single"],
+    "quotes": [
+      "error",
+      "single"
+    ],
     "radix": "error",
     "default-case": "error",
     "eqeqeq": "error",
-    "jsx-quotes": ["error", "prefer-double"]
+    "jsx-quotes": [
+      "error",
+      "prefer-double"
+    ]
   }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "editor.fontSize": 13
-}
+    "editor.fontSize": 13,
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -31,8 +31,7 @@ pr:
     - docs/*
 
 pool:
-  # todo: we dgaf what specific version of Linux is installed, is there any way to wildcard the version?
-  vmImage: 'Ubuntu-16.04'
+  vmImage: 'ubuntu-latest'
 
 variables:
   shouldPublish: $[or(eq(variables['Build.SourceBranch'], 'refs/heads/dev'), startsWith(variables['Build.SourceBranch'], 'refs/heads/release/'))]
@@ -58,7 +57,7 @@ steps:
     npm run lint-apps
   displayName: 'linting apps'
 - script: |
-    npm run test-packages
+    npm run coverage-packages
   displayName: 'running tests'
   env: {
     testEnv: 'ci'

diff --git a/docs/data/routes/docs/client-frameworks/angular/sample-app/en.md b/docs/data/routes/docs/client-frameworks/angular/sample-app/en.md
@@ -199,7 +199,7 @@ There are several mechanisms of using/outputting translated values with `ngx-tra
 
 #### `JssTranslationLoaderService`
 
-This implementation loads the Sitecore dictionary from the Dictionary Service provided by JSS, found at `/sitecore/api/jss/dictionary/`, using `HttpClient`. It is used as a "fallback" during both client and server rendering.
+This implementation loads the Sitecore dictionary from the Dictionary Service provided by JSS, found at `/sitecore/api/jss/dictionary/`, using `RestDictionaryService`. It is used as a "fallback" during both client and server rendering.
 
 #### `JssTranslationServerLoaderService`
 

diff --git a/docs/data/routes/docs/client-frameworks/vue/reference/en.md b/docs/data/routes/docs/client-frameworks/vue/reference/en.md
@@ -32,9 +32,9 @@ The library provides helper components to help output Sitecore field values.
 
 > The helper components that are exposed from `sitecore-jss-vue` are all stateless functional components with the exception of `Placeholder`, which is a typical stateful component.
 
-> In accordance with Vue's [recommendations for functional components](https://vuejs.org/v2/guide/render-function.html#Passing-Attributes-and-Events-to-Child-Elements-Components), any non-prop attributes passed to the component will be rendered as html attributes on the enclosing tag. Events that are passed will be propagated as well.
+> In accordance with Vue's [attribute inheritance](https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance), any non-prop attributes passed to the component will be rendered as html attributes on the enclosing tag. Events that are passed will be propagated as well.
 
-> It is also important to note that _none_ of the helper components exposed from `sitecore-jss-vue` are registered globally, e.g. via `Vue.component()`. This is intentional so as not to pollute the global component space and also to align with the tree-shaking capabilities of bundling tools like Webpack or Rollup. Therefore you will need to locally require/import any of the helper components you wish to use in your own components.
+> It is also important to note that _none_ of the helper components exposed from `sitecore-jss-vue` are registered globally, e.g. via `app.component()`. This is intentional so as not to pollute the global component space and also to align with the tree-shaking capabilities of bundling tools like Webpack or Rollup. Therefore you will need to locally require/import any of the helper components you wish to use in your own components.
 
 Below is a list of all supported field helper components, and how they are used (where `field` is data coming from a placeholder component):
 

diff --git a/docs/data/routes/docs/client-frameworks/vue/sample-app/en.md b/docs/data/routes/docs/client-frameworks/vue/sample-app/en.md
@@ -18,7 +18,7 @@ The Vue sample supports running in all [JSS application modes](/docs/fundamental
 
 ## Component Format
 
-The JSS Vue sample primarily uses [Single-File Components (SFC)](https://vuejs.org/v2/guide/single-file-components.html) for presentational components. However, you are free to use whichever component declaration and registration method you choose, e.g. `render` functions, inline `template` properties, etc...
+The JSS Vue sample primarily uses [Single-File Components (SFC)](https://v3.vuejs.org/guide/single-file-component.html#introduction) for presentational components. However, you are free to use whichever component declaration and registration method you choose, e.g. `render` functions, inline `template` properties, etc...
 
 ## Routing + State Management
 
@@ -90,9 +90,9 @@ The JSS [disconnected mode](/docs/fundamentals/application-modes) enables develo
 
 Refer to the [JSS + GraphQL](/docs/fundamentals/services/graphql) documentation to understand the overall capabilities first - we're only talking about Vue and _Connected GraphQL_ specifically here. _Integrated_ GraphQL works at the server level, so it is identical in any supported frontend framework.
 
-The Vue sample app makes use of the [vue-apollo](https://akryum.github.io/vue-apollo/) library which in turn integrates with the [Apollo GraphQL client](https://www.apollographql.com/client). Usage is fairly straightforward and you can follow the `vue-apollo` documentation for implementation specifics.
+The Vue sample app makes use of the [@vue/apollo](https://v4.apollo.vuejs.org/) library which in turn integrates with the [Apollo GraphQL client](https://www.apollographql.com/client). Usage is fairly straightforward and you can follow the `@vue/apollo` documentation for implementation specifics.
 
-> When server-side rendering (SSR), the sample app uses the `prefetch` functionality of `vue-apollo` to prefetch GraphQL query data and render the app to HTML on the server. This allows server-side rendering with the async results of GraphQL queries evaluated. If not using GraphQL, the `vue-apollo` prefetching functionality can be removed. It is _important_ to note that when `vue-apollo` is prefetching queries the queries do _not_ have access to instantiated components. This means no access to component props, state, or other instance properties. If queries need that type of data to populate query variables, the data will need to be extracted from the SSR state available via the `renderView` function.
+> When server-side rendering (SSR), the sample app uses the `prefetch` functionality of `@vue/apollo` to prefetch GraphQL query data and render the app to HTML on the server. This allows server-side rendering with the async results of GraphQL queries evaluated. If not using GraphQL, the `@vue/apollo` prefetching functionality can be removed.
 
 > Complete examples of using connected and integrated GraphQL are provided with the sample app and are heavily commented, for example `src/components/GraphQL-ConnectedDemo`. Please refer to these samples for implementation details.
 
@@ -116,12 +116,12 @@ export default {
 
 Usage of `this.$jss` is dependent on installing the `SitecoreJssStorePlugin`:
 
-_createApp.js_ (where your Vue instance is created, e.g. `new Vue()`)
+_createApp.js_ (where your Vue instance is created, e.g. `createApp()/createSSRApp()`)
 
 ```javascript
 import SitecoreJssStorePlugin from './lib/SitecoreJssStorePlugin';
 
-Vue.use(SitecoreJssStorePlugin);
+app.use(SitecoreJssStorePlugin);
 ```
 
 The final piece of using `this.$jss.sitecoreContext()` and `this.$jss.routeData()` is to ensure that the `store` used by the `SitecoreJssStorePlugin` is updated when the Sitecore context/route data changes. This could be when the route changes in your app, or when server-side rendering passes down a state object - any time new layout data is pulled from Sitecore and rendered. To accomplish this, we use the `this.$jss.store.setSitecoreData()` function to update the JSS plugin store with data received from Layout Service. The `setSitecoreData` function accepts raw Layout Service data and updates the app-level context and route data accordingly. You can see an example of usage in `RouteHandler.js`. An abbreviated example is below:

diff --git a/docs/data/routes/docs/client-frameworks/vue/vue-overview/en.md b/docs/data/routes/docs/client-frameworks/vue/vue-overview/en.md
@@ -20,7 +20,7 @@ jss start
 
 We recommend reading the [sample app walkthrough](/docs/client-frameworks/vue/sample-app) to understand the sample app, but it's also well commented if you'd rather read code.
 
-> The sample app was built using the [`@vue/cli` version 3](https://github.com/vuejs/vue-cli) as a starting point. However, the `sitecore-jss-vue` package has no dependencies on `@vue/cli`.
+> The sample app was built using the [`@vue/cli` version 4](https://github.com/vuejs/vue-cli) as a starting point. However, the `sitecore-jss-vue` package has no dependencies on `@vue/cli`.
 
 ## Tools