ibm / pwa-lit-template Goto Github PK

Describe the bug

IBM Cloud deploy action is not working
The issue is from: cloudfoundry/cli#2033

To reproduce

We can see the logs here:
https://github.com/IBM/pwa-lit-template/runs/1049897169?check_suite_focus=true

Expected behavior

Deploy working

Is your feature request related to a problem? Please describe.

Keeping track of Service Worker can be tricky, so we could make it opt-in.

Describe the solution you'd like

Keep the Service Worker disabled by default.
Allowing the user to activate / uncomment it in a simple way.

Describe the bug

Right now, when build the project (npm run build), the output doesn't work.

Seems like the this.main is undefined:

From the @query decorator:

To reproduce

Just build and run the project.

Expected behavior

Working as always.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Lock file maintenance

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @web/dev-server-esbuild to ~0.3.6

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

• Update dependency @web/dev-server to ~0.1.38

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @web/dev-server-rollup to ~0.4.1
• Update dependency @rollup/plugin-replace to v5
• Update dependency @rollup/plugin-typescript to v10
• Update dependency @rollup/plugin-typescript to v11
• Update dependency @rollup/plugin-typescript to v9
• Update dependency rollup to v3
• Update dependency stylelint to v15
• Update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Right now we use the PRPL server just to use Rendertron, for crawlers (social networks and SEO).

It would be nice to find an alternative.

Current LitElement draft: lit/lit#1231

Work in progress PR: #202

Our objective is to add Lighthouse as a GitHub Action to measure the impact of each RP and try to maintain a score of 100.

Some references:
https://github.com/GoogleChrome/lighthouse
https://github.com/GoogleChrome/lighthouse-ci

With #456 we disabled by default the service worker so we need to include in the README a section where to explain how to configure it.

Is your feature request related to a problem? Please describe.

When it's ready, we should replace the es-dev-server with @web/dev-server.

Describe the bug

Core issue: stylelint/stylelint#4761

To reproduce

Run the Stylelint script: npm run lint:stylelint

It doesn't warn of possible errors.

Expected behavior

Warn of possible errors.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

As svg icons are supported in all modern browsers right now, maybe we can update it.

Some references:

• https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df
• https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
• https://catalin.red/svg-favicon-light-dark-theme/

Reference to Web Vitals: https://web.dev/vitals/

It would be great if there was a way to measure track performance metrics via a simple function. Developers would be able to log values to the console and/or send results to an analytics endpoint for all users on their site.

Reference to CRA:

• https://create-react-app.dev/docs/measuring-performance
• facebook/create-react-app#8996
• facebook/create-react-app#9116

The new version v1.3.0 of @web/rollup-plugin-html introduce the absoluteBaseUrl.

With this, it change the og:image meta tag with the full URL.

I think it would be good to include an example of styling the active navigation links based on the current route as this probably a pretty common ask, its basically one of the first things I tried to get working and the right approach is not immediately obvious.

To be complete it would be good to have an example of styling a link that has child routes e.g.
if the link was to /items which displayed a list of items.
Then navigating to /items/item1 should still consider the link as active as it is a child route of items.

Not sure how best to do this, seems vaadin router passes route information down to the routed elements, e.g. location.params.id.

However since the navigation links are in app-index.ts where the router itself is attached it won't have access to that .

So one option would be to move the navigation links into one of the routed components (maybe an overall parent layout component that matches all routes, which handles the navigation bar itself with a slot for the content - then have child routes to '/' and '/about' for the home and about content.

Or another option would be to add an event listener in the app-index.ts that updates some state containing the current routing information (bit like this: vaadin/router#483).

window.addEventListener('vaadin-router-location-changed', this.handleRouteChange)

Maybe there is a better way, any thoughts?

Right now the lit-analyzer found two problems (warnings) about the pwa-helper-components. You can the npm run typescript:type-checking to see it.

> lit-analyzer "src/{components,pages}/**/*.ts" --strict

Analyzing 4 files...

./src/components/app-index.ts

    Unknown tag <pwa-install-button>.
    63:  <pwa-install-button>
    no-unknown-tag-name


    Unknown tag <pwa-update-available>.
    67:  <pwa-update-available>
    no-unknown-tag-name


  ✖ 2 problems in 1 file (0 errors, 2 warnings)

Related issues:

• thepassle/pwa-helpers#12
• runem/lit-analyzer#122

• The page-not-found.ts add the render:status_code

• The page-element.ts update the HTML meta tags based on the route metatada property. Also the user can override the metadata() method to use dynamic data.

• The renderPageNotFound helper. The user can use this helper in the render() method in a page. For example, in a user route when the user doesn't exists. We will know that the user does not exist after making the request to the API.

  Related Vaadin Router issue: vaadin/router#408

Because the vaadin-router dynamically replaces the page-elements shown inside the <main> tag, there is no chance for the app-index to pass some properties down to the page-elements.

Whats the best way to achieve this?

Manifest, Service Workers, offline, install & update buttons, ...

On Firefox Ubuntu

I use npm start and then the content doesn't appear, only the menu.

Uncaught (in promise) TypeError: [Vaadin.Router] Expected router outlet to be a valid DOM Node (but got undefined)
__ensureOutlet router.js:752
__addAppearingContent router.js:786
ready router.js:498
promise callback*render router.js:469
attachRouter index.ts:29
firstUpdated app-index.ts:103
_$didUpdate reactive-element.ts:1350
performUpdate reactive-element.ts:1317
scheduleUpdate reactive-element.ts:1235
__enqueueUpdate reactive-element.ts:1207
requestUpdate reactive-element.ts:1182
_initialize reactive-element.ts:924
ReactiveElement reactive-element.ts:907
LitElement lit-element.js:82
AppIndex app-index.ts:18
legacyCustomElement custom-element.ts:21
customElement custom-element.ts:64
__decorateClass app-index.ts:7
app-index.ts:18
router.js:752:12
GEThttp://192.168.1.108:8000/src/pages/page-about.ts
[HTTP/1.1 304 Not Modified 1ms]

Is your feature request related to a problem? Please describe.

When the app grows, keep the import ordering can get awkward.

Describe the solution you'd like

Enforce import ordering with ESLint.
https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md

'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],

For example, something like navigate to each route and get the expected title & description

The Vaadin Router doesn't help us to restore scroll position on navigation.
There is already an issue about it: vaadin/router#43

Meanwhile, for now, we have created a simple patch to deal with it: now when you perform a click event, the scroll will be reset to the top position.

But we wish we could find a good solution soon.

We already mentioned it here:
https://github.com/IBM/pwa-lit-template#things-to-be-aware

Right now we lazy import and initialize the router here:

This router.init() function doesn't export anything:

Doing it this way, we found a problem:
We can't import the router instance to use the router helpers.

For example, we want to replace the hardcoded link in the not found page to use the router name. From this:

To something like this:

<a href="${router.urlForName('home')}">Back to home</a> 

And the same for the navigation links:

Describe the bug

[!] Error: ENOENT: no such file or directory, lstat 'C:\Users\saadon\AppData\Local\Temp\6'

To reproduce

Type npm run build

Expected behavior

I am interested to build for different env (CI, QA, EA and PRD), and each build should use the relevant config file (config.ci.ts, config.qa.ts etc.).

Thank you

We want to try setup Renovate to test and merge minor and patch releases without PR.

Current config:

Replace lit-analyzer dependency in favor of ts-lit-plugin.

Add this in the tsconfig.json:

"plugins": [
  {
    "name": "ts-lit-plugin",
    "strict": true
  }
]

Also remove the lit:type-checking script, because with the typescript:type-checking will be enough.

Depends on: runem/lit-analyzer#82
Fixed by: runem/lit-analyzer@83d49d7

Now waiting the new release.

We wan an updated online demo from the template.
We can do it from a GitHub Action.