crowdstrike / ember-url-hash-polyfill Goto Github PK

Support for in/inter page linking / scrolling with hashes in EmberJS

License: MIT License

JavaScript 19.13% HTML 7.08% Handlebars 0.27% TypeScript 73.51%

ember-url-hash-polyfill's Introduction

ember-url-hash-polyfill

Navigating to URLs with #hash-targets in them is not supported by most single-page-app frameworks due to the async rendering nature of modern web apps -- the browser can't scroll to a #hash-target on page load / transition because the element hasn't rendered yet. There is an issue about this for Ember here on the RFCs repo.

This addon provides a way to support the behavior that is in normally native to browsers where an anchor tag with href="#some-id-or-name" would scroll down the page when clicked.

Installation

yarn add ember-url-hash-polyfill
# or
npm install ember-url-hash-polyfill
# or
ember install ember-url-hash-polyfill

Compatibility

Ember.js v3.25 or above
Node.js v14 or above

Usage

To handle /some-url/#hash-targets on page load and after normal route transitions,

  // app/router.js

  import { withHashSupport } from 'ember-url-hash-polyfill';

+ @withHashSupport
  export default class Router extends EmberRouter {
    location = config.locationType;
    rootURL = config.rootURL;
  }

Additionally, there is a scrollToHash helper if manual invocation is desired.

import { scrollToHash } from 'ember-url-hash-polyfill';

// ...

scrollToHash('some-element-id-or-name');

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

ember-url-hash-polyfill's People

Contributors

Stargazers

Watchers

Forkers

michalbryxi classicvalues emporatitle keletes romgere

ember-url-hash-polyfill's Issues

Dependency Dashboard

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

Rate-Limited

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

Open

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

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

volta-cli/action v1

actions/checkout v3

volta-cli/action v1

actions/checkout v3

volta-cli/action v1

actions/checkout v3

volta-cli/action v1

actions/checkout v3

actions/setup-node v3

kellyselden/ember-cli-update-action v3

actions/checkout v3

volta-cli/action v1

.github/workflows/lint.yml

actions/checkout v3

volta-cli/action v1

actions/checkout v3

volta-cli/action v1

wagoid/commitlint-github-action v4.1.15

npm

package.json

ember-cli-babel ^7.26.11

ember-cli-htmlbars ^6.2.0

ember-cli-typescript ^5.2.1

ember-test-waiters ^2.1.3

webpack 5

@commitlint/cli ^13.1.0

@commitlint/config-conventional ^13.1.0

@ember/optional-features ^2.0.0

@ember/test-helpers ^2.9.3

@glimmer/component ^1.0.4

@glimmer/tracking ^1.0.4

@nullvoxpopuli/eslint-configs ^1.3.0

@semantic-release/changelog ^6.0.3

@semantic-release/git ^10.0.1

@types/ember-qunit ^4.0.1

@types/ember-resolver ^5.0.11

@types/ember__application ^3.16.4

@types/ember__array ^3.16.5

@types/ember__component ^3.16.7

@types/ember__controller ^3.16.7

@types/ember__debug ^3.16.7

@types/ember__destroyable 3.22.0

@types/ember__engine ^3.16.4

@types/ember__error ^3.16.2

@types/ember__object ^3.12.7

@types/ember__polyfills ^3.12.2

@types/ember__routing ^3.16.16

@types/ember__runloop ^3.16.4

@types/ember__service ^3.16.2

@types/ember__string ^3.16.3

@types/ember__template ^3.16.2

@types/ember__test ^3.16.2

@types/ember__test-helpers ^2.6.1

@types/ember__utils ^3.16.3

@types/htmlbars-inline-precompile ^1.0.1

@types/qunit ^2.11.3

@types/rsvp ^4.0.4

babel-eslint ^10.1.0

broccoli-asset-rev ^3.0.0

ember-auto-import ^2.6.3

ember-cli ~4.12.1

ember-cli-dependency-checker ^3.3.1

ember-cli-inject-live-reload ^2.1.0

ember-cli-sri ^2.1.1

ember-cli-terser ^4.0.2

ember-cli-typescript-blueprints ^3.0.0

ember-disable-prototype-extensions ^1.1.3

ember-load-initializers ^2.1.2

ember-maybe-import-regenerator ^1.0.0

ember-page-title ^7.0.0

ember-qunit ^5.1.5

ember-resolver ^8.0.3

ember-source ~4.2.0

ember-source-channel-url ^3.0.0

ember-template-lint ^3.2.0

ember-try ^3.0.0-beta.1

eslint ^7.20.0

eslint-config-prettier ^8.3.0

eslint-plugin-ember ^10.2.0

eslint-plugin-node ^11.1.0

eslint-plugin-prettier ^3.3.1

loader.js ^4.7.0

npm-run-all ^4.1.5

prettier ^2.2.1

qunit ^2.18.0

qunit-dom ^2.0.0

semantic-release ^19.0.5

typescript ^4.6.2

node 16.* || >= 18

node 16.20.0

yarn 1.22.19

travis

.travis.yml

node 14

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

Does not catch some initial page load cases

The problem

On initial page load (or empty cache & hard page reload) the scroll to hash does not happen. In other cases (navigation, soft page reload, ...) it works.

Observations

Happens only on "empty cache & hard reload"
We get pass the uiSettled function call
We see the "Tried to scroll to element with id or name "${hash}", but it was not found" message in the console, but:
The element with given ID is eventually present; On subsequent soft page reload everything works
If we pause in debugger just before the warning message (above) then we can see that the UI is not fully settled (loading spinners and such)
If we try to debug the steps we can see that uiSettled returns before all the route models resolve

The automated release is failing 🚨

🚨 The automated release from the `main` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Scroll is not happening on initial page load for app with loading routes

In the case

an application have loading route
the "final" route take too long to load its model

the scroll is never happening.

Here is a minimal reproduction app :

https://github.com/romgere/ember-url-hash-polyfill-sandbox

In case you navigate to http://127.0.0.1:4200/ & then navigate to http://127.0.0.1:4200/sub-route/post#title4 through the button, everything is working fine, scroll is happening despite the long loading time of the route's model hook.

In case you initially navigate too http://127.0.0.1:4200/sub-route/post#title4, the scroll is never happening.

What's happening :

this is supposed to wait for the initial Page Load
in the case app have loading route, it's resolved with the transition to the loading route.
The "waiting for DOM mutation logic" is triggered
But given the "regular route" is not yet load (model's promise is not resolved), if the model's hook take too long to load (& take too long to render DOM), the "waiting logic" will end in timeout & the target element won't be present.
When the actual transition (from loading to regular route) is happening, the "hash" part of the URL has been strip (IDK why 🤔 ) & the transition URL does not contain any hash.
So here, the eventuallyTryScrollingTo function is called, but there's no longer any hash to work with.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.