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

@eotl/core

v0.3.11

Published

Assortment of data structures, Vue.js components, and utilities across EOTL apps and sites.

Downloads

44

Readme

Core

status-badge

Various data, structures, and utils to use across EOTL applications.

⚠️ Warning this repo is not ready for production and is highly subject to change

JS Utils & Components

A JavaScript package that can be installed in your JS application.

$ yarn add @eotl/core

Vue Components

import { ... } from '@eotl/core/components

Vue Mixins

import { ... } from '@eotl/core/mixins

Vue i18n translation strings

import { ... } from '@eotl/core/locales

Generic Utils

import { ... } from '@eotl/core/enums

Styling

For the components to work properly you also need to include the styling

import '@eotl/core/dist/style.css'

Example

To include Vue.js libraries you must first include and init() the package with the following:

import { useEotlCore } from '@eotl/core/store'

// init EOTL core
const eotlStore = useEotlCore()

eotlStore.init({
  // mapboxToken: '',
  url_sextant: import.meta.env.VITE_SEXTANT_URL,
  url_api: import.meta.env.VITE_SEXTANT_API_URL
})

This package will only work with passing in a pinia store (for now), thus working only in a Vue.js app and breaking the idea of using it as a standalone.

Alerts

To trigger alerts in apps, use these components. The message argument is required, the title has a default specified.

eotlStore.alertPrimary('Hello, I am a primary alert.')
eotlStore.alertSuccess('Good job, keep it up', 'Success Custom Title')
eotlStore.alertInfo(message, title)
eotlStore.alertWarning('message', title)
eotlStore.alertDanger(message, title)

Fetching Data

Within the eotlStore are HTTP fetch() helpers which handle various response states.

async fetchGet(endpoint, queryString = '') { ... }
async fetchPost(endpoint, record) { ... }
async fetchPatch(endpoint, record) { ... }
async fetchDelete(endpoint) { ... }

To-Do

  • [ ] Logistics UI widget for calculating size, weight, and price estimation of items to be transported

Vue Basic Setup Testing

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

Customize configuration

See Vite Configuration Reference.

Developing

yarn install

Compile and Hot-Reload for Development

yarn dev

To work on eotl.places.js code, Places is served separately because we wanna know for sure that no other libraries are being imported in the code with the vite.config.places.js config file.

yarn dev:places

The normal Component view can also be seen at root directory and is compiled:

  • http://localhost:8081/places.html

For local dev and importing it in another package use

yarn build --watch

Compile and Minify for Production

yarn build

Lint with ESLint

yarn lint

Go

No shared Golang code at present... but will be soon.