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

@fullcube/campaign

v0.0.5

Published

- 0 dependencies - all shipped code is vanilla JS, minimalistic and performant. The only dependency is optional APM run for logging and debugging purposes. - 0 css - library is style-agnostic. Specific events can add or remove classes up to your cust

Downloads

21

Readme

Features

  • 0 dependencies - all shipped code is vanilla JS, minimalistic and performant. The only dependency is optional APM run for logging and debugging purposes.
  • 0 css - library is style-agnostic. Specific events can add or remove classes up to your customization.
  • Default field values - all fields can have default values set (i.e. country: USA).
  • Flexible - any event, validation etc. can be easiely overridden with custom method.
  • Internationalization - languages can be added by simply adding {languageCode}.json file in data/i18n directory.
  • Modular and dynamic - specific, required module is loaded dynamically using new ESM feature. Same goes for country and state data.
  • Multi-step forms - you can easiely create forms splitted into unlimited number of html pages, which keep passing query parameters until meeting the final page and performing request.
  • Real time validation - input is validated instantly when typed. Invalid characters are prevented from inputting (except for copy-pase events, which are unhandled purposedly).
  • Recurly v4 - updated from v3 that is soon end of support.

Usage

<script type="module">
    import { fcCampaign } from 'https://cdn.jsdelivr.net/npm/@fullcube/campaign@latest/dist/campaign.js';

    fcCampaign.bootstrap({
        /* -------------------------------------------------------------------------- */
        /*                                    Defaults                                */
        /* -------------------------------------------------------------------------- */

        // Specify modules you plan to use on a page.
        modules: [
            {
                name: 'add-member'
            }
        ],

        // Actions to be performed on submit button clicked. Modules are loaded on-demand through inspection of an array.
        actions: [
            {
                // Module name in kebab-case convention.
                module: 'add-prospect',

                // Action name in camelCase convention.
                name: 'addProspect'
            },
            {
                module: 'discord',
                name: 'login'
            }
        ],

        /* ------------------------------ Internal services ------------------------------- */
        api: {
            // API url.
            url: `https://api.fullcube.io/api/v1`,

            // ID of landing page in fullcube admin. Getter allows specifying additional logic.
            landingPage() {
                return {
                    id: `cjs-landingPage-1`
                };
            }
        },

        i18n: {
            // Specifies name of json file that will be loaded from path ${assets.path}/i18n/${i18n.language}.js
            language: 'en'
        },

        assets: {
            // Path to static resources required by certain modules like languages, countries, states etc. in JSON.
            path: `https://cdn.jsdelivr.net/npm/@fullcube/campaign@latest/dist/data`
        },

        dom: {
            // Classes added to elements when they are disabled.
            disabledClasses: [
                `bg-gray-500`,
                `-bg-blue-500`,
                `-hover:bg-blue-700`
            ],

            // Classes added to elements on error.
            errorClasses: [`border-red-500`],

            // Suffix of feedback HTMLElements (labels) like fc-firstName-feedback.
            feedbackSuffix: `feedback`,

            // Prefix for all HTMLElement's id's.
            idPrefix: `fc`
        }
    });
</script>

How it works?

  1. Loads dynamically submodule based on configuration (i.e. add-prospect).
  2. Loads page configuration from the API.
  3. Binds to DOM elements with specific id's depending on loaded submodule (i.e. fc-firstName, fc-firstName-feedback; form, error and submit are obligatory).
  4. Listens and reacts to input events.
  5. On submit performs submodule action defined in configuration. When redirected - persists all existing query parameters along with data from filled form.

Project structure

Showcase

Contains example pages required for development setup.

Modules

Modules are parts of library loaded on demand. They define fields that are should be hijacked from DOM, their validation methods and actions available to perform on form submit via actions option. Logically, one module should handle single usual use case.

TODO

  • Specific build targetting old browsers