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

@things-factory/shell

v4.3.543-alpha.0

Published

Core module for framework

Downloads

21,088

Readme

Things-Factory is an environment to develop mobile-oriented apps.

Features

  • It is based on module structure.
    • You can configure related feature sets for each module.
    • It is removable by module.
    • You can define dependencies between modules. Apply nodejs module dependency structure.
  • Redux pattern
  • Use i18next for internationalization
  • Packaging function uses webpack
  • The code set is based on es6,7,8, and transpiling with babel
    • class-properties
    • decorators
    • object-rest-spread
  • Using Web Component-based DomElement - Defining custom element with LitElement
  • It is activated by linking with URL path and history in Single Page Application.
  • Each page is loaded at the time of initial activation. (lazy loading)
  • Zero Configuration function. It uses SSDP (Service Discovery Protocol) to automatically find services to be connected automatically and provide related functions. For example, it attempts to connect automatically by finding a server to connect to.
  • Token-based authentication (requires improvement to be supported by the server framework)

Structural conventions

  • Redux
    • The way to manage the overall state of an Application is using Redux pattern.
    • The application, or base modules, can prepare points in the store that can be extended by a sub-module and provide an action.
    • The sub-modules connect to the extension structure of the application or parent module using the action defined in the parent (base) module.
  • Page, Layout and Component
    • Pages are activated by associating with the URL. (route)
    • Layouts provide a framework for the layout and structure of the entire application UI elements.
    • The components provide independent (atomic) functionality.
      • The component excludes dependencies on the application in order to maintain implementation independence.
        • Style maintains its independence by using css variables.
        • Multilinguals maintain independence by using i18n-msg components. (Only have dependencies on i18n-msg.)
        • The component does not have a premise for the layout (display, position) of the host (container) to which it will be used.
    • page, layouts are connected to redux.
    • Components do not connect to redux, but they work with pages through properties.
  • Base Module and extension (common) Modules (ex. provider, ui)
    • The Base Module provides an abstract definition of special functions.
    • The Base Module is said to provide functional services to the extension module.
    • The extension module can add the base module as a dependent module and directly use the functions defined in the base module.
    • Another way the extension module extends the Base Module is by using the reducer and action added to the store.
    • The Base Module is a base module that reads a group of modules. For example, board-base module is a base module for all board functions. In addition, label-base module defines and implements functions related to the label, including barcode label pop-up, barcode label scanning, barcode label rendering and printing.
    • The naming convention of base module for xxx module is 'xxx-base'.
  • Provider Module
    • Sub-module that fills the data of Base module
    • It mainly serves to fill the data defined in Base module from the external server.
    • The naming convention for Provider module of xxx module is 'xxx-provider'.
    • If it is necessary to be distinguished by the way data is provided, the naming convention for Provider module of xxx module using yyy method can be defined as 'xxx-provider-yyy'.
  • UI Module
    • Sub-module responsible for the screen configuration related to Base module
    • The naming convention for UI module of xxx module is 'xxx-ui'.
    • If it is necessary to be distinguished by UI configuration method, the naming convention for UI module of xxx module using yyy method may be 'xxx-ui-yyy'.
  • Shell, Module and Application
    • Shell provides all the structures that enable the module structure in the development and execution stages.
      • redux, assets, routing
      • build module, build application
    • Module is only responsible for implementing its own purpose in the Shell base.
    • Application is the final product that consists of the modules necessary for the purpose of Shell and the user.
      • Configurations by Application
        • Manifest file (brand-related - application name, logo image)
        • Other brand related - homepage link, banner logo
        • Style : Representative color table, other css variables
        • Server connection IP
        • Other source/resource override

Other coding conventions

  • Source file length recommended

    • Each source file implements one of the most important purposes. (Be responsible for simple purposes rather than multiple purposes.)
    • If there is no specific reason for each source file, it is recommended not to exceed 200 lines.
  • Naming

    • class
      • Class name : starts with uppercase, camel-case
      • private property, method : starts with _(underscore), camel-case
      • public property, method : starts with lowercase, camel-case
      • class property, method : starts with lowercase, camel-case
      • Event handler : starts with on + EventName, camel-case
  • Localization

    • Don’t capitalize explicitly in locale file
"field.system brief": "System Brief" (x)
"field.system brief": "system brief" (o)

You can set it to style where you need it.

text-transform: capitalize;
text-transform: uppercase;
  • If possible, use ‘ms.json’ rather than ‘ms-My.json’. In particular, use ‘ms-My’ only if it is a Malay language that is used differently only in Malaysia.

Authentication

things-factory/shell

  • Control the authentication process through auth base.
    • Set authentication through auth base.
  • Provide auth action.
    • You can change store through authentication related action.
  • Provide auth reducer.
  • That is, it sets through auth base and provides auth-related extension point.
  • In particular, auth base function is provided directly in things-factory shell.

things-factory/auth-ui

  • Provide the client side authentication process based on JSON webtoken.

Prerequisites

  • Install Windows Subsystem for Linux on Windows (Windows)

    Install WSL using Ubuntu following https://docs.microsoft.com/en-gb/windows/wsl/install-win10

  • VS Code Extensions

    Prettier - Code formatter

    es6-string-css

    lit-html

  • VS Code Configuration

    Format on save: true

  • nodejs (v8.0.0 and above)

  • yarn

  • Cordova

    npm install -g cordova

  • Chrome Browser Extension

    https://github.com/zalmoxisus/redux-devtools-extension

  • Yeoman

    npm install -g yo

  • Things Factory Generator

    npm install -g generator-things-factory

  • Node-gyp (For Ubuntu)

    npm install -g node-gyp

  • Python2 (For Ubuntu)

    sudo apt-get install python

    npm install --python=python2.7

    npm config set python python2.7

  • mdns (For Ubuntu)

    sudo apt-get install build-essential

    sudo apt-get install libavahi-compat-libdnssd-dev

  • node-printer (For Ubuntu)

    sudo apt-get install libcups2-dev

Create a new app

$ yo things-factory:app

Create a new module

base module

$ yo things-factory:base-module

ui module

$ yo things-factory:ui-module

References

  • https://github.com/material-components/material-components-web-components