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

sinto

v1.9.0

Published

Project development manager for web and JavaFX

Downloads

43

Readme

Sinto project management

A generateable web application using JavaScirpt and TypeScript, and a JavaFX form application for VSCode.

GitHub:

Install

npm i -g sinto

Using

Make a project:

mkdir app01
cd app01

Generate default web directories and files:

sin init

Install default dependecies:

npm i

Development server

sin serve

Building

sin build

This command is generate public directory from src directory.

Commands

  • sin init - Initilalize the project
  • sin serve - Start development server
  • sin build - Start public generation
  • sin rmno - Delete node_modules directory
  • sin api - Generate fake REST API with hai-server
  • sin webpack - Generate Webpack project
  • sin pup - Generate Puppeteer test with Mocha
  • sin addts - Generate tsconfig.json and add dependencies
  • sin ts - Initialize TypeScript Node.js project
  • sin web - Generate HTML and empty CSS files
  • sin esbuild - Generate esbuild project
  • sin javafx - Generate JavaFX project

For web application, the default task manager is gulp. Development serve is browser-sync.

Fake REST API server

The sin api command generate fake REST API project directory with hai-server.

Using:

sin api
npm i

Generated files:

app01/
  |-database.json
  |-hai-server.json
  |-package.json
  `-README.md

Webpack project generator

The sin webpack command generate a webpack project.

Using:

sin webpack
npm i

Generated directories and files:

app01/
  |-assets/
  |-dist/
  |  `-index.html
  |-src/
  |  |-js/
  |  |  `-index.js
  |  `-scss/
  |     `-style.scss
  |-package.json
  |-README.md
  `-webpack.config.js

Puppeteer test with Mocha

The sin pup command generate a Puppeteer test with Mocha default test file.

The sin pup command does not install the dependencies, it just writes them into the package.json file. Install the dependencies with the npm i or pnpm i command.

Using:

sin pup
npm i

Generated directoriy and file:

app01/
  `-test/
      `-apptest.js

Automatically adds the test script and dependencies to the package.json file.

{
  "scripts": {
    "test": "mocha"
  },
  "devDependencies": {
    "mocha": "^x.y.z",
    "puppeteer": "^x.y.z"    
  }
}

The version numbers are updated.

Write the tests in test directory and run the tests:

npm test

TypeScript

TypeScript config and dependencies

The sin addts command generate a tsconfig.json and add dependencies to package.json.

The sin addts command does not install the dependencies, it just writes them into the package.json file. Install the dependencies with the npm i or pnpm i command.

Using:

sin init
sin addts
npm i

TypeScript Node.js project

The sin ts command generate a TypeScript Node.js project.

Using:

sin ts
npm i

Generated directories and files:

app01/
  |-src/
  |  |-assets/
  |  |-app.ts
  |  |-index.html
  |  `-style.css
  |-bs-config.json
  |-gulpfile.js  
  |-package.json
  |-README.md
  `-tsconfig.json  

ESBuild project generator

The sin esbuild command generate a esbuild project.

Using:

sin esbuild
pnpm i
pnpm dev
pnpm start

Generated directories and files:

app01/
  |-public/
  |  |-index.html
  |  `-style.css
  |-src/
  |  `-index.js
  |-package.json
  `-README.md

Update the src/app.ts your index file.

Example:

  • src/app.ts
  • src/index.ts
  • src/app.js
  • src/index.js
  • src/script.js

To build production run next command:

pnpm build

This command is generate dist directory from src directory. The build command not copy the public directory.

JavaFX project generator

The sin javafx command generate a JavaFX project. The generated project willl be a package generated with No build tools for VSCode.

Steps to use:

  • Create project directory. For example: mkdir app01
  • Change directory to project directory. For example: cd app01
  • Create a JavaFX project with the sin javafx command.
  • Copy to lib dirctory JavaFX libraries.
  • Open project directory with VSCode: code .
  • Add Configuration with VSCode: Run > Add Configuration..
  • Save the .vscode/launch.json file.
  • Run project with VSCode: Run > Run This will fail.
  • Set the JavaFX path. For example: sin javafx -p lib/javafx
  • Open the mainScedne.fmxl file, and add components, and save.

Change the path to your JavaFX path.