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

@wizdom-intranet/services

v2.0.6

Published

A list of core service to ease Wizdom development

Downloads

151

Readme

wizdom-services

A list of core service to ease Wizdom development

Vue.js

Wizdom product development use Vue.js. Specific vue service class are available.

Development

Build

npm run build:watch

Test

npm run test:watch

Initialize in SPFx web part

export default class WizdomServiceTestWebPart extends BaseClientSideWebPart<...> {

  private wizdomServices: WizdomSpfxServices;

  protected async onInit(): Promise<void> {
    this.wizdomServices = new WizdomSpfxServices(this.context);
    await this.wizdomServices.InitAsync({});
  }
  ...
}

After initialization the following services are available.

var context = wizdomServices.WizdomContext;
var translationService = wizdomServices.TranslationService;
var configuration = wizdomServices.WizdomConfiguration;
var cache = wizdomServices.Cache;
var apiService = wizdomServices.WizdomWebApiService;

WizdomContext

export interface IWizdomContext {
    appUrl: string;
    blobUrl: string;
    clientId: string;
}

TranslationService

export interface IWizdomTranslationService {
    /**
    * @param key    translation key
    * @returns translated string.
    */
    translate(key: string): string;
}

Available query string parameters

Just as in AddIn classic it is possible to changing language by a query string. SPLanguage=en-us

Show missing translations wizdomdevelopermode=true

Configuration

An object matching the content of configuration.js from AddIn classic.

Only the most relevant configFilter will be part of the configuration object.
Examle: The Megamenu can have configurations specific to multiple url's. But only the one relevant to current pageview will be returned as part of the configuration object.

Cache

export interface IWizdomCache {
    Localstorage: IWizdomLocalstorageCache;
    PageView: IWizdomPageViewCache;
    Timestamps: IWizdomTimestamps;
}
export interface IWizdomLocalstorageCache {
    ExecuteCached<T>(
      key: string, 
      func: Function, 
      expiresInMilliseconds: number,
      refreshInMilliseconds: number,
      refreshDelayInMilliseconds: number): Promise<T>;
}
export interface IWizdomPageViewCache {
    ExecuteCached<T>(
      key: string,
      func: Function,
      expiresInMilliseconds: number): T;
}
export interface IWizdomTimestamps {
    get(key?: string) : Promise<number>;
    addMappings(key: string, ...mappings: string[]) : void;
}

key

Should be [Module].[Function]:[variables] ex. Megamenu.GetMenu:user(at) wizdom.onmicrosoft.com:da-dk

When using LocalStorage [Module] will be used to look up cache bursting time stamp either by direct match, through mapping or the "global" timestampConfiguration.

So in this case:

wizdomServices.Cache.Timestamps.addMappings('Test', 'ModernCss')
wizdomServices.Cache.Localstorage.ExecuteCached('Test.Data', ...)

the cache will be "busted" by timestampTest, timestampModernCss and timestampConfiguration

func

A function that returns a promise.

expiresInMilliseconds

If the cache has not been updated within the expiration period. The func will be executed immediately.

refreshInMilliseconds

If the cache has not been updated within the refresh period. The cached data will be returned and the func will be executed in the background.

refreshDelayInMilliseconds

If the refresh period is expired. The func will be executed delayed by these seconds. Use this to remove load from the first few seconds of a pageload.

return value from Timestamps.get

The return value from Timestamps.get is milliseconds since January 1st 1970 UTC

Available query string parameters

Disable all localstorage cache. ?wizdomdevelopermode={"nocache":true}

WizdomWebApiService

export interface IWizdomWebApiService {
    Get(url: string): Promise<any>;
    Delete(url: string): Promise<any>;
    Post(url: string, data: any): Promise<any>;
    Put(url: string, data: any): Promise<any>; 
}

Calling from custom javascript

WizdomWebApiService are exposed globally on the window object when a Wizdom webpart or extension are loaded on the page. Use the Get, Delete, Post and Put method to call the Wizdom backend.

window.WizdomWebApiService.Get("api/Wizdom/StructuredContent/v1/personal/...").then((response) => { console.log("content", response); });

Developermode

Add the querystring ?wizdomdevelopermode=

Change Context variables

Use developermode to change appurl. ?wizdomdevelopermode={"wizdomcontext":{"appUrl":"http://localhost:####"}}

Use developermode to show a console error on missing translations. ?wizdomdevelopermode={"errorMissingTranslations":"true"} Whenever wizdomdevelopermode is active any missing translations will be rendered as [Translation missing: #text#]. But with this configuration a missing translation will also be written to console with "console.error". This makes it easy to spot those missing translations.

Example of full localhost usage ?wizdomdevelopermode={"nocache":"true","wizdomContext":{"appUrl":"https://localhost:44357/","clientId":"b2054421-d077-495c-9681-49c0c8246a2b","blobUrl":"https://localhost:44357/FileStorage/AzureDev/"}}

Enable blobUrl overwrite

Place Web.config file within the /FileStorage folder. Add the following content to the file to enable cors for all origins.

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <remove name="Access-Control-Allow-Origin" />
        <remove name="Access-Control-Allow-Headers" />
        <remove name="Access-Control-Allow-Methods" />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,PATCH,OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <validation validateIntegratedModeConfiguration="false" />
  </system.webServer>
</configuration>

Set no cache through developermode

Use developermode to change disable cache. ?wizdomdevelopermode={"nocache":true}

Context data

Normally data for the wizdomcontext is stored in the tenantproperty 'wizdom.properties'. But it's also possible to store this data in the web property bag, ex. when hosting multiple wizdominstances in one sharepoint tenant.

To set the context data for a site, use the following powershell, with appropriate values

$site = Get-PnPTenantSite -Url https://myTenant.sharepoint.com/sites/somesite
Set-PnPPropertyBagValue -Key "wizdom.properties" -Value '{"appUrl":"https://url.azurewebsites.net/","blobUrl":"https://myblob.blob.core.windows.net/wizdom365public/","clientId":"60e014c8-a71c-4a56-866c-36631a87a3cf"}'
$site.Update()
$site.Context.ExecuteQuery()

User language

Once every 12 hours wizdom-service check if the current users preferred SharePoint UI language match the one stored in Wizdom. If they don't match it will automatically be updated in Wizdom.