Skip to content
View feelinglovelynow's full-sized avatar
1 follower · 0 following
Block or Report

Block or report feelinglovelynow

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
feelinglovelynow/README.md

Feeling Lovely Now

Docs

Code Examples

Articles

Utilities

Tech Stack Costs

Local install

  1. Install git
  2. Install node & npm
  3. Install nvm
  4. In bash navigate to the place you would love to place this code
git clone https://github.com/feelinglovelynow/feelinglovelynow.git
cd feelinglovelynow
nvm use 18
npm install -g pnpm
pnpm setup
source /Users/[ username ]/.zshrc
pnpm i

Start development server

pnpm dev

Validates code & then pushes to github main branch

pnpm mainPush

Deploy to production

pnpm mainDeploy

View logs for production server

pnpm mainLogs

View logs for qa server

pnpm qaLogs

Updates all dependencies

pnpm up

Set default tab size in VSCodium to 2 for new files

Preferences > Settings > JSON

{
  "editor.tabSize": 2
}

Show what folder we are in @ the tab level of VSCodium

Preferences > Settings > JSON

{
  "workbench.editor.labelFormat": "short"
}

Stop VSCodium from compacting folders in sidenav

Preferences > Settings > JSON

{
  "explorer.compactFolders": false
}

Increase indent for sub folders in VSCodium sidenav

Preferences > Settings > JSON

{
  "workbench.tree.indent": 18
}

Get project wide typescript reporting in VSCodium

  • Turn this off when getting errors in node_modules Preferences > Settings > JSON
{
 "typescript.tsserver.experimental.enableProjectDiagnostics": true
}

Show autocomplete suggestions in VSCodium

Control + Space

Reload VSCodium

This is helpful when type definitions are stale (showing incorrect errors)

Command + Shift + P
Developer: Reload Window

How to create an NPM Package

  1. Bash mkdir example && cd example && touch tsconfig.json && touch tsconfig.build.json && pnpm init && pnpm i typescript -D
// tsconfig.build.json
{
  "files": [], // all src files (including index.js) (not including .test.js)
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "declaration": true,
    "strict": true,
    "outDir": "tsc",
    "declarationMap": true,
    "module": "NodeNext", // use ESNext if .svelte components in /src
    "target": "ES2017"
  }
}

// tsconfig.json
{
  "files": [], // all src files with a .js extension
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "strict": true,
    "module": "NodeNext",
    "target": "ES2017"
  }
}
  1. Add src folder AND put .js or .svetle code in there AND ensure all imports w/in src have .js extension AND ensure no exports are default
  2. IF adding a typedefs.js file and there are no imports in the file => at the end of the file add export {}
  3. Create ./src/index.js file and put all exports in there from src folder
  4. IF svelte component is in src => Export in index.js like this: export { default as Example } from './Example.svelte'
  5. IF svelte component is in src => Add Example.svelte.d.ts
import { SvelteComponent } from 'svelte'


export default class Example extends SvelteComponent<{
  css?: string
  label?: string
  href?: string
  widthRem?: number
}> {}
  1. IF file in src updates window at the top of the file add /// <reference path="./types.d.ts" /> and in that file put
declare global { // Node global types
  interface Window { // Browser window types
    flnToastWrapper: HTMLElement | null | undefined
  }
}

export {}
  1. Put all src files w/ .js extension into tsconfig.json files array
  2. Bash pnpm tsc -w
  3. Create ./src/index.ts file and put all .d.ts exports in there from tsc folder (only put extension as .d)
  4. IF src folder has a types.d.ts file => Include export * from './types.d' in index.ts file
  5. IF svelte component is in src => Export in index.ts like this: export { default as Example } from './Example.svelte'
  6. Bash touch esbuild.js && pnpm i esbuild -D
import esbuild from 'esbuild'


esbuild.build({ // // https://esbuild.github.io/api/
  logLevel: 'info', // Show warnings, errors, and an output file summary. 
  sourcemap: true, // Source maps can make it easier to debug your code. They encode the information necessary to translate from a line/column offset in a generated output file back to a line/column offset in the corresponding original input file. 
  minify: true, // When enabled, the generated code will be minified instead of pretty-printed. 
  outdir: './dist', // Sets the output directory for the build operation.
  entryPoints: [ // This is an array of files that each serve as an input to the bundling algorithm.
    './tsc/DgraphTransaction.js',
    './tsc/enumContentType.js',
    './tsc/index.js',
    './tsc/typedefs.js',
  ],
})
  1. Populate esbuild.js with all .js files that will go from the tsc folder to the the dist folder - build options
  2. Bash touch build.sh
#!/bin/bash
pnpm test &&
npx istanbul-badges-readme --statementsLabel='Coverage' &&
rm -rf ./dist ./tsc &&
pnpm tsc -p tsconfig.build.json &&
node ./esbuild.js &&
cp ./src/index.ts ./dist/index.ts
  1. IF Svelte component is in src => Bash: pnpm add svelte -D
  2. IF Svelte component is in src => add cp like this: cp ./src/Example.svelte ./dist/Example.svelte and add cp ./src/Example.svelte.d.ts ./dist/Example.svelte.d.ts
  3. IF types.d.ts is in src => add cp like this: cp ./src/types.d.ts ./dist/types.d.ts
  4. IF CSS files in src => add cp like this: cp ./src/example.css ./dist/example.css
  5. Add MIT LICENSE to root folder
  6. Add README.md to root folder
  7. Add to README.md
## 🤓 Unit Tests
![Statements](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg?style=flat)
  1. Bash touch jest.config.js && pnpm i jest -D && pnpm i @jest/globals -D
/** @type { import('jest').Config } */
const config = { // https://jestjs.io/docs/configuration
  clearMocks: true, // Automatically clear mock calls, instances, contexts and results before every test
  collectCoverage: true, // Indicates whether the coverage information should be collected while executing the test
  coverageDirectory: 'coverage', // The directory where Jest should output its coverage files
  coverageProvider: 'v8', // Indicates which provider should be used to instrument code for coverage
  injectGlobals: false, // Insert Jest's globals (expect, test, describe, beforeEach etc.) into the global environment. If you set this to false, you should import from @jest/globals
}

export default config
  1. IF jest tests will have any DOM tests or tests for any .svelte files => Bash pnpm i jest-environment-jsdom -D AND add to jest.config.js
{
  testEnvironment: 'jest-environment-jsdom', // The test environment that will be used for testing. The default environment in Jest is a Node.js environment. If you are building a web app, you can use a browser-like environment via 'jest-environment-jsdom'
}
  1. IF jest tests will have any .svelte files => Bash pnpm i @testing-library/svelte -D && pnpm i svelte-jester -D AND add to jest.config.js
{
  moduleFileExtensions: ['js', 'svelte'], // An array of file extensions your modules use
  extensionsToTreatAsEsm: ['.svelte'], // If you have files that are not `.js` and `.cjs` that should run with native ESM, you need to specify their file extension here
  transform: { '^.+\\.svelte$': 'svelte-jester' }, // https://www.npmjs.com/package/svelte-jester
}
  1. Remove main from package.json
  2. Add description to package.json
  3. Add to package.json
{
  "author": "https://github.com/feelinglovelynow?tab=repositories",
  "license": "MIT",
  "type": "module",
  "types": "./dist/index.ts",
  "exports": "./dist/index.js",
  "files": [
    "dist",
    "tsc",
    "src"
  ],
  "keywords": [

  ],
  "scripts": {
    "watch": "pnpm tsc -w",
    "build": "bash ./build.sh",
    "cloud": "pnpm build && pnpm publish --access public .",
    "test": "NODE_OPTIONS=--experimental-vm-modules pnpm jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/feelinglovelynow/example.git"
  },
  "bugs": {
    "url": "https://github.com/feelinglovelynow/example/issues"
  }
}
  1. Update package.json [ name, keywords, repository, bugs ]
  2. If there is a svelte component in this package add to package.json - guidance
{
  "main": "./dist/index.js",
  "svelte": "./dist/index.js",
}
  1. IF there is a .css file in ./src => add to package.json
{
  "exports": {
    ".": "./dist/index.js",
    "./index.css": "./dist/index.css"
  },
}
  1. Bash touch .gitignore
coverage
dist
node_modules
tsc
  1. In ./src folder add a __tests__ folder and in it add a .test.js file for each .js file in ./src that is not ./src/index.js or ./src/typedefs.js
  2. Bash pnpm build
  3. In another app link to this package locally "example": "link:../example"
  4. Publish package to npm

Publish package to npm

pnpm whoami
pnpm login
pnpm publish --access public .

Deprecate an npm package

npm deprecate @sensethenlove/toast@1.x "This project has been renamed. Install using @feelinglovelynow/toast instead."

Popular repositories

  1. ace-graph-database ace-graph-database Public

    Our mission is to create, maintain and enhance the Best database for JavaScript Developers!

    JavaScript 2

  2. jwt jwt Public

    Node and/or Edge helper functions to create JWK's AND create and verify JWT's with the subtle crypto api (ECDSA)

    JavaScript 1

  3. feelinglovelynow feelinglovelynow Public

    Please feel free to visit our store (lovely products), our library (lovely info) or our links page (for my contact info)!

    Svelte

  4. env-write env-write Public

    Set keys and values in .env file w/ bash

    JavaScript

  5. get-form-entries get-form-entries Public

    Recieves Form Data and responds with an Object

    JavaScript

  6. get-relative-time get-relative-time Public

    Simple function that recieves a date and gives back the relative time using Intl.RelativeTimeFormat('en', { numeric: 'auto' })

    JavaScript