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

@manifoldco/manifold-init

v0.7.5

Published

Manifold UI Initialization

Downloads

29

Readme

manifold-init

This web component is a hub for our other web components to use for things like managing authentication, making network calls, and reporting errors and analytics.

Why does this exist?

This exists for the benefit of our other web components, so that they don't each have to do the work of implementing more complex concerns that are shared by all components.

Usage

If you are using one of our web component libraries, you need manifold-init. This component needs to be on the page for other components to use our GraphQL API. It accepts a client-id attribute which tells us which provider or platform you are within our system.

Basic

At minimum, the component must be on the page with your client-id. Using manifold-plan-table as an example:

  <head>
    <script
      nomodule
      src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js"
    ></script>
    <script 
      nomodule 
      src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.js"
    ></script>
    
    <script
      async
      type="module"
      src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js"
    ></script>
    <script
      async
      type="module"
      src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.esm.js"
    ></script>
    <script async type="module" src="/build/manifold-plan-table.esm.js"></script>
  </head>
  <body>
    <manifold-init client-id="your-client-id"></manifold-init>
    <manifold-plan-table product-id="your-product-id"></manifold-plan-table>
  </body>

Authentication

Some of our components require your users to be authenticated in order to access their private data from our GraphQL API. You can retrieve a user authentication token using the createProfileAuthToken mutation. Once you have the auth token, you can pass it into the manifold-init component as the auth-token attribute. This token will then be included in all GraphQL requests to identify the user to our API.

    <manifold-init client-id="your-client-id" auth-token="user-auth-token"></manifold-init>

Development

The manifold-init component exposes a connection object that web components can use to perform GraphQL requests and analytics tracking. You access this object by querying for the node as soon as manifold-init is defined in the custom elements registry:

    await customElements.whenDefined('manifold-init');
    const core = document.querySelector('manifold-init') as HTMLManifoldInitElement;
    this.connection = await core.initialize({
      element: this.el,
      componentVersion: '<@NPM_PACKAGE_VERSION@>',
      version: 0,
    });

TypeScript

If you're using TypeScript in your component library, you'll need access to some type definitions.

The connection object

The definition for the Connection object is found in its own library, @manifoldco/manifold-init-types.

import { Connection } from '@manifoldco/manifold-init-types/types/v0';

This library supports multiple versions of the Connection object in order to avoid breaking changes for web components. The above example shows v0 being used.

HTMLManifoldInitElement

This is the type definition for the manifold-init element itself, and it also lives in @manifoldco/manifold-init-types. This can be exposed globally in your project in a type declaration file:

// global.d.ts
export * from '@manifoldco/manifold-init-types/types/components';