npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

scully-plugin-flash-prevention

v0.0.41

Published

The `scully-plugin-flash-prevention` is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.

Downloads

1,522

Readme

ScullyPluginFlashPrevention

The scully-plugin-flash-prevention is a postRenderer that helps you hide any flashes that your app may be experiencing once you add Scully to your project.

After adding Scully, your app will appear instantly because the pre-rendered HTML and CSS is immediately available. After appearing instantly, the JavaScript and CSS files will download and then your Angular app will bootstrap (init). When it bootstraps, the pre-rendered version may disappear for a moment, and then once the app is ready, the view will re-appear. This disappearing-then-appearing is very normal for apps that are pre-rendered on a server. This project is to prevent that.

This project shows the pre-rendered copy of your app until your app is fully render and the flash is over. It then shows your app and deletes the copy.

How it works

Before this plugin, you app would pre-render and then save to file, like this:

<app-root _nghost-abc="" ng-version="9.0.1" class="my-class">
  // The entire content of your app here
</app-root>

After this plugin, you will see the following in your pre-rendered template:

<app-root class="my-class"></app-root>
<app-root-scully _nghost-abc="" ng-version="9.0.1" class="my-class">
  // The entire content of your app here
</app-root-scully>

This app-root-scully will be the pre-rendered copy of your app. Prior to your app being rendered fully, app-root will be hidden and app-root-scully will be displayed. Once your app has fully bootstrapped, app-root-scully will be hidden and then 100ms later removed from the DOM. The mechanism that shows and hides these two is CSS. There is some CSS added during the Scully build that looks like the following:

body:not(.loaded) app-root {
  display: none;
}
body.loaded app-root-scully {
  display: inherit;
}

Once the app has been fully loaded, the loaded class is added to the <body> tag.

And that's how it all works!!!

Getting Started

1 - Install the package: npm install -D scully-plugin-flash-prevention

2 - Add the postRenderer to your scully.config:

// Add this line to your imports
const { getFlashPreventionPlugin } = require('scully-plugin-flash-prevention');

// Add the following to your `scully.config.postRenderers`
exports.config = {
  ...
  postRenderers : [getFlashPreventionPlugin({appRootSelector: 'custom-app-root'})],
  ...
}

You only need to pass the {appRootSelector: 'custom-app-root'} if your app has a selector other than app-root. It is defaulted to app-root.

3 - Update app.module to include alwaysMonitor in the ScullyLibModule.forRoot call.

ScullyLibModule.forRoot({
  useTransferState: true,
  alwaysMonitor: true,  <-- Add this line to your `app.module.ts`
});

4 - Apply any styles from app-root to app-root-scully as well. Any styles that are in your app.component.(css|scss|less) need to be applied to the copy of your app that was made. This means that you need to possibly move any styles that apply to the app-root specifically, and put them in a location where you can also make those styles apply to app-root-scully as well. See here:

// BEFORE
app-root {
  ... some styles;
}

// AFTER
app-root,
app-root-scully {
  ... some styles;
}

That's all it takes to get set up.