Merge pull request #432 from IBM/imports

Update import paths

README.md

@@ -7,7 +7,7 @@
 
 # pwa-lit-template
 
->[Getting started](#getting-started) | [Build for production](#build-for-production) | [Create a new page](#create-a-new-page) | [Environment configuration](#environment-configuration) | [Browser support](#browser-support)
+> [Getting started](#getting-started) | [Build for production](#build-for-production) | [Create a new page](#create-a-new-page) | [Environment configuration](#environment-configuration) | [Browser support](#browser-support)
 
 This project helps you to build Progressive Web Applications following the modern web standards, best practices and providing you with tools for that purpose. Out of the box, provides you with the following features:
 
@@ -98,7 +98,7 @@ Note: If you need to add static files to the build, like the `images` folder or
    ```typescript
    import { html, customElement } from 'lit-element';
 
-   import { PageElement } from '../helpers/page-element';
+   import { PageElement } from '../helpers/page-element.js';
 
    @customElement('page-explore')
    export class PageExplore extends PageElement {
@@ -135,7 +135,7 @@ With SEO in mind, this project offers you the `PageElement` base class to help y
 This project allows different configurations per environment. The file that manages that configuration is `src/config.ts`. If you are interested in overwrite any of the configuration variables depending of the environment, you can create a file following the rule `src/config.{NODE_ENV}.ts`. Take into account that you don't need to replicate all the variables, just change the variable that you need to be different this way:
 
 ```typescript
-import config from './config';
+import config from './config.js';
 
 export default {
   ...config,
@@ -148,7 +148,7 @@ In the build process the references in the project (but not in the configuration
 Lastly, the way to use that configuration is quite simple. You only need to import it:
 
 ```typescript
-import config from '../config';
+import config from '../config.js';
 ```
 
 And use it where you need it:

rollup.config.js

@@ -66,7 +66,7 @@ const config = merge(
               exclude: 'src/config.*.ts',
               delimiters: ['', ''],
               values: {
-                './config': `./config.${process.env.NODE_ENV}`
+                './config.js': `./config.${process.env.NODE_ENV}.js`
               }
             })
           ]

src/components/app-index.ts

@@ -7,8 +7,8 @@
 
 import { LitElement, html, css, customElement, query } from 'lit-element';
 
-import config from '../config';
-import { attachRouter, urlForName } from '../router';
+import config from '../config.js';
+import { attachRouter, urlForName } from '../router/index.js';
 
 import 'pwa-helper-components/pwa-install-button.js';
 import 'pwa-helper-components/pwa-update-available.js';

src/config.production.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import config from './config';
+import config from './config.js';
 
 export default {
   ...config,

src/config.staging.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import config from './config';
+import config from './config.js';
 
 export default {
   ...config,

src/helpers/html-meta-manager/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { setMetaTag, setLinkTag } from './utils';
+import { setMetaTag, setLinkTag } from './utils.js';
 
 interface ImageMetadataOptions {
   url: string;

src/helpers/page-element-not-found.ts

@@ -7,9 +7,9 @@
 
 /* eslint-disable wc/guard-super-call */
 
-import { setMetaTag, removeMetaTag } from '../helpers/html-meta-manager/utils';
+import { setMetaTag, removeMetaTag } from './html-meta-manager/utils.js';
 
-import { PageElement } from '../helpers/page-element';
+import { PageElement } from './page-element.js';
 
 export class PageElementNotFound extends PageElement {
   connectedCallback() {

src/helpers/page-element.ts

@@ -9,10 +9,10 @@ import { LitElement, internalProperty } from 'lit-element';
 import type { PropertyValues } from 'lit-element';
 import type { Route, RouterLocation } from '@vaadin/router';
 
-import config from '../config';
+import config from '../config.js';
 
-import { updateMetadata } from './html-meta-manager';
-import type { MetadataOptions } from './html-meta-manager';
+import { updateMetadata } from './html-meta-manager/index.js';
+import type { MetadataOptions } from './html-meta-manager/index.js';
 
 // Add metadata options to the @vaadin/router BaseRoute
 declare module '@vaadin/router/dist/vaadin-router' {

src/pages/page-about.ts

@@ -7,7 +7,7 @@
 
 import { html, css, customElement } from 'lit-element';
 
-import { PageElement } from '../helpers/page-element';
+import { PageElement } from '../helpers/page-element.js';
 
 @customElement('page-about')
 export class PageAbout extends PageElement {

src/pages/page-home.ts

@@ -7,7 +7,7 @@
 
 import { html, css, customElement } from 'lit-element';
 
-import { PageElement } from '../helpers/page-element';
+import { PageElement } from '../helpers/page-element.js';
 
 @customElement('page-home')
 export class PageHome extends PageElement {

src/pages/page-not-found.ts

@@ -7,9 +7,9 @@
 
 import { html, css, customElement } from 'lit-element';
 
-import { urlForName } from '../router';
+import { urlForName } from '../router/index.js';
 
-import { PageElementNotFound } from '../helpers/page-element-not-found';
+import { PageElementNotFound } from '../helpers/page-element-not-found.js';
 
 @customElement('page-not-found')
 export class PageNotFound extends PageElementNotFound {

src/router/index.ts

@@ -8,7 +8,7 @@
 import { Router } from '@vaadin/router';
 import type { Params } from '@vaadin/router';
 
-import { routes } from './routes';
+import { routes } from './routes.js';
 
 const router = new Router();
 

src/router/routes.ts

@@ -7,7 +7,7 @@
 
 import type { Route } from '@vaadin/router';
 
-import config from '../config';
+import config from '../config.js';
 
 export const routes: Route[] = [
   {