package-wiki.md

Package Wiki

This file documents Metalink Frontend's package.json in a human-readable manner designed to make it easy for contributors to see how related units work together.

Units are ordered by Dependency Type > Category > Group, then listed with Titles, Descriptions, Links and Notes.

Please edit or improve the sections and descriptions as required, then keep this document up to date.

Dependencies

Front end

Core Vue libraries:

• vue
  The progressive JavaScript framework for buiding modern web UI.

• vue-router #template
  Official router for Vue

• vue-i18n
  Internationalization plugin for Vue.js

• ⭐ vee-validate
  Form Validation for Vue.js

• ⭐ pinia on 2022-04-14 by @ds
  Intuitive, type safe and flexible Store for Vue

  🎯 Leaving a note about how we use this right here

Examples using details:

• pinia

  Intuitive, type safe and flexible Store for Vue

  Committed on 2022-04-14 by @ds

  🎯 Leaving a note about how we use this right here

• pinia

  Intuitive, type safe and flexible Store for Vue

  • Committed on 2022-04-14 by @ds
  • 🎯 Leaving a note about how we use this right here

Supporting Vue libraries:

• @vueuse/core
  Collection of essential Vue Composition Utilities

• @vueuse/head
  Document head manager for Vue 3. SSR ready.

• vue-demi
  Write universal Vue libraries for Vue 2 & 3

Vue UI:

• @vueuse/integrations
  Integration wrappers for utility libraries

• @headlessui/vue
  A set of completely unstyled, fully accessible UI components for Vue 3, designed to integrate beautifully with Tailwind CSS.

• vue3-popper
  A Vue 3 popper component. Uses PopperJS v2.

• vue-observe-visibility
  Detect when an element is becoming visible or hidden on the page.

• vue-recaptcha
  ReCAPTCHA vue component

3rd party UI:

• @popperjs/core
  Tooltip and Popover Positioning Engine

• nprogress
  Simple slim progress bars

Backend

Sockets:

• @absinthe/socket
  Absinthe Socket

• phoenix
  The official JavaScript client for the Phoenix web framework.

Graph QL:

• graphql
  A Query Language and Runtime which can target any service.

• graphql-tag
  A JavaScript template literal tag that parses GraphQL queries

• graphql-ws
  Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client

• urql
  A highly customizable and versatile GraphQL client for React

• @urql/vue
  A highly customizable and versatile GraphQL client for vue

Database:

• firebase
  Firebase JavaScript library for web and Node.js

Services

Third-party:

• vite-plugin-sentry
  The unofficial Sentry plugin for Vite ⚡️

• @appsignal/javascript
  AppSignal for JavaScript

• @cloudinary/url-gen
  Quickly and easily integrate your application with Cloudinary

• @gtm-support/vue-gtm
  Simple implementation of Google Tag Manager for Vue

• mixpanel-browser
  The official Mixpanel JavaScript browser client library

• plausible-tracker
  Unofficial frontend tracker to interact with Plausible Analytics

Web 3:

• @walletconnect/client
  Client for WalletConnect

• @walletconnect/qrcode-modal
  QR Code Modal for WalletConnect

• ethers
  Umbrella package for most common Ethers libraries.

• siwe
  Sign-In with Ethereum

• web3
  Ethereum JavaScript API

Utilities

Vue

• axios
  Promise based HTTP client for the browser and node.js

• yup
  Dead simple Object schema validation

• marked
  A markdown parser built for speed

• intersection-observer
  A polyfill for IntersectionObserver

Pure

• date-fns
  Modern JavaScript date utility library

• date-fns-tz
  Time zone support for date-fns v2 with the Intl API

• snakecase-keys
  Convert an object's keys to snake case

• string-replace-async
  Asynchronous String.prototype.replace()

• uuid
  RFC4122 (v1, v4, and v5) UUIDs

System

• dotenv
  Loads environment variables from .env file

Dev Dependencies

Core build

TypeScript:

• typescript
  TypeScript is a language for application scale JavaScript development

• vue-tsc
  ...

Transpiling:

• @babel/core
  Babel compiler core.

• babel-loader
  babel module loader for webpack

Environment

• cross-env
  Run scripts that set and use environment variables across platforms

Application

Vite core

• vite
  Native-ESM powered web dev build tool

• @vitejs/plugin-vue
  Official plugin for using Vue with Vite

• vite-plugin-inspect
  Inspect the intermediate state of Vite plugins

Environments

• vite-ssg
  Server-side generation for Vite

• vite-plugin-pwa
  Zero-config PWA for Vite

Build

• @vue/compiler-sfc
  @vue/compiler-sfc

• vue-loader
  Webpack loader that allows you to author Vue components in a format called Single-File Components (SFCs)

• vite-plugin-fonts
  Webfont loader for vite

• vite-svg-loader
  Vite 2.x plugin to load SVG files as Vue components

• critters
  Plugin to inline critical CSS and lazy-load the rest.

Developer Experience

• unplugin-auto-import
  Register global imports on demand for Vite and Webpack

• unplugin-vue-components
  Components auto importing for Vue

• vite-plugin-pages
  File system base vue-router plugin for Vite

• vite-plugin-vue-layouts
  Router based layout plugin for Vite and Vue

• @intlify/vite-plugin-vue-i18n
  Vite plugin for Vue I18n

Assets

• unplugin-icons
  Access thousands of icons as components on-demand universally

• @iconify/json
  Iconify icons collection in JSON format

• @juit/vite-plugin-vue-svg
  SVG support for Vue/Vite (with TypeScript!)

Windi CSS

• vite-plugin-windicss
  Windi CSS for Vite, it's fast!

• @windicss/plugin-animations
  Add Animate CSS as Windi CSS plugin to your project.

• @windicss/plugin-question-mark
  A plugin that provides a helpful ? dev time utility

Tooling

Project:

• pnpm
  Fast, disk space efficient package manager

• husky
  Modern native Git hooks made easy

• https-localhost
  HTTPS server running on localhost

• testcafe
  Automated browser testing for the modern web development stack.

Linting:

• eslint
  An AST-based pattern checker for JavaScript.

• eslint-config-standard-with-typescript
  An ESLint Shareable Config for JavaScript Standard Style with TypeScript support

• eslint-plugin-import
  Import with sanity.

• eslint-plugin-node
  Additional ESLint's rules for Node.js

• eslint-plugin-promise
  Enforce best practices for JavaScript promises

• eslint-plugin-vue
  Official ESLint plugin for Vue.js

Services

Web 3:

• @openzeppelin/contracts
  Secure Smart Contract library for Solidity

• hardhat
  Hardhat is an extensible developer tool that helps smart contract developers increase productivity by reliably bringing together the tools they want.

Caching:

• workbox-core
  This module is used by a number of the other Workbox modules to share common code.

• workbox-precaching
  This module efficiently precaches assets.

Scripts

Application

Run the development server:

npm run dev

Build the production app:

npm run build

...:

npm run preview

...:

npm run preview-https

Storybook

...:

npm run story

...:

npm run build-story

Linting

Lint:

npm run lint

Lint and fix:

npm run lint-fix

Testing

Test using (Cypress?):

npm run test:e2e

Smart contracts

...:

npm run sc-test

...:

npm run sc-ganache

...:

npm run sc-goerli

...:

npm run sc-rinkeby

...:

npm run sc-mainnet

Wiki

Update this file:

npm run wiki