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

nxus-web

v4.2.0-2

Published

Base theme, template, and MVC support for Nxus applications

Downloads

72

Readme

nxus-web

MVCModule

Extends HasModels

A base class for common application module organization

Automatically registers:

  • Templates from ./templates
  • Models from ./models - these files should extend nxus-storage.BaseModel)
  • Controllers from ./controllers - you may want to extend nxus-web.ViewController

Parameters

  • options (optional, default {})

ViewController

Extends HasModels

A base class for CRUD routes and templates for a model

Parameters

You can pass any of the following into the constructor options argument:

  • modelIdentity - defaults to name of class, underscored, e.g. todo_item
  • prefix - defaults to name of class, dashed, e.g. todo-item
  • templatePrefix - defaults to same as prefix
  • routePrefix - defaults to '/'+prefix
  • pageTemplate - the layout to use to render the page
  • populate - relationships to populate on find. Accepts a string, array, or array of [rel, options] arrays.
  • displayName - defaults to class name
  • instanceTitleField - defaults to first attribute
  • paginationOptions - object with sortField, sortDirection, and itemsPerPage keys.
  • ignoreFields - blacklist of fields to ignore in display
  • displayFields - whitelist of fields to display, show in this order if supplied
  • listFields - subset of fields to show on list view
  • searchFields - subset of fields to use for search strings
  • idField - field to use for id in routes

Implement Routes

The default implementation of the routes handles querying for the model instance, pagination, and the template rendering. See the specific method documentation for each public view function.

Overriding templates

Assuming your opts.prefix/opts.templatePrefix is my-module, the following templates are registered with default implementations:

  • my-module-detail
  • my-module-list

Overriding this in your module by registering a template with templater, either by naming it my-module-list.ejs and using templator.templateDir or explicitly:

import {templater} from 'nxus-templater'
 
class MyModule extends ViewController {
  constructor(opts={}) {
    ...
    super(opts)
    templater.replace().template(__dirname+"/path/to/template.ejs", this.pageTemplate, this.templatePrefix+"-detail")
  }
}

Parameters

  • options (optional, default {})

list

Implement the list route. Resolve the passed query and return the context for template templatePrefix-list

Parameters

  • req Request The express request object
  • res Response The express response object
  • query object A query that can be further filtered or populated before resolution

Returns object The context for template rendering. Include pagination: this.paginationOptions by default

detail

Implement the view/detail route. Resolve the passed query and return the context for template templatePrefix-view

Parameters

  • req Request The express request object
  • res Response The express response object
  • query object A query for one object that can be further populated before resolution

Returns object The context for template rendering.

EditController

Extends ViewController

A base class for CRUD routes and templates for a model

Parameters

See Controller docs

You can pass any of the constructor options arguments defined by ViewController, plus the following:

  • redirect - set to false to disable redirect (default is true)
  • redirectAfterCreate - path suffix to routePrefix after route
  • redirectAfterEdit - path suffix to routePrefix after route
  • redirectAfterDelete - path suffix to routePrefix after route

Implement Routes

The default implementation of the routes handles querying for the model instance, pagination, and the template rendering. See the specific method documentation for each public view function.

Overriding templates

See also the ViewController templates documentation. Assuming your opts.prefix/opts.templatePrefix is my-module, the following templates are registered with default implementations:

  • my-module-create
  • my-module-edit

Parameters

  • options (optional, default {})

edit

Implement the edit route. Resolve the passed query and return the context for template templatePrefix-edit

Parameters

  • req Request The express request object
  • res Response The express response object
  • query object A query that can be further filtered or populated before resolution

Returns object The context for template rendering.

create

Implement the create route. Return the context for template templatePrefix-create

Parameters

  • req Request The express request object
  • res Response The express response object
  • object object An empty object for setting defaults for the template

Returns object The context for template rendering.

_doUpdate

Override to perform custom update logic

Parameters

  • id id ID to update
  • values object Fields object

Returns object The updated instance

_doCreate

Override to perform custom create logic

Parameters

Returns object The created instance

_doRelatedUpdate

Override to perform custom related field updates after create or update

Parameters

  • inst object instance to set related fields for
  • related object {related_field: value} object

Returns object The updated instance

_doRemove

Override to perform custom remove logic

Parameters

  • id id ID to remove

Returns object The updated instance

save

Implement object save for create and edit routes.

Parameters

  • req Request The express request object
  • res Response The express response object

replaceRouteParams

Replaces route parameters with values.

Parameters

Returns string route path, with parameters replaced

DataTablesMixin

A mixin class for ViewController or subclasses to support jQuery DataTables (https://datatables.net)

Supports either client-side data (overriding normal pagination queries) or server-side processing (providing an ajax endpoint compatible with datatables API).

Options:

  • useDataTablesAjax - (false) whether server-side ajax should be used to populate, page, and query the data
  • useDataTablesCSS - (cdn css url, or array of urls) some themes already include datatables support, if so set this to false
  • useDataTablesURL - (cdn script url, or array of urls) to override the default cdn URL
  • useDataTablesEnableScript - (path to js) to override initialization script to include

Client-side processing is the default:

  import {DataTablesMixin, EditController} from 'nxus-web
  class MyView extends DataTablesMixin(EditController) {
     // usual EditController options like model, displayFields
  }

Set the useDataTablesAjax option to true for large datasets or server-side search logic etc.

  import {DataTablesMixin, EditController} from 'nxus-web
  class MyView extends DataTablesMixin(EditController) {
      constructor(options={}) {
         // usual EditController options like model, displayFields
         options.useDataTablesAjax = true
         super(options)
     }
  }

The useDataTablesCSS, useDataTablesURL, and useDataTablesEnableScript are needed for enabling additional extensions, e.g. to use Datatables.select:

  class MyView extends DataTablesMixin(EditController) {
      constructor(options={}) {
         options.useDataTablesURL = [
           "//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js",
           "//cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"
         ]
         options.useDataTablesCSS = [
           "//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css",
           "//cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css"
         ]
         // this file in your project would include `$('.datatable).DataTable({select: true})` etc
         options.useDataTablesEnableScript = __dirname+"/components/my-datatables-enable.js"
         super(options)
     }
  }

Parameters

  • superclass

Nav

Extends NxusModule

import {nav} from 'nxus-web'

add

Register a nav menu item

Parameters

  • menu string Group of nav items
  • label string Text for menu item
  • link string URL of menu item
  • options object Extra context for rendering (icon, css) (optional, default {})

get

Retrieve a menu group

Parameters

  • menu string Group of nav items

Returns Array Menu items

WebActions

Extends NxusModule

import {actions} from 'nxus-web'

Example adding a link button to the template 'template-name': actions.add('template-name', 'Label', '/link' {icon: 'fa fa-plus'})

Retrieving actions for use (normally not needed, automatically added to template context as 'actions) actions.getActions('template-name')

You may additionally group actions together by providing a 'group' key to the options object.

Templates

This module provides four templates that may be overridden:

  • actions-buttons to render an action group as buttons

  • actions-button the default template for each button

  • actions-icons to render an action group as minimal icons

  • actions-icon the default templateMinimal for each icon

    Rather than overriding all buttons/icons, you may provide a custom template for a specific action as the template or templateMinimal option. When rendered with the default actions-buttons or actions-icons templates, these receive an action's object as their only context.

Parameters

  • opts