- Svelte
- SvelteKit
- SvelteKit SVG
- Svelte Jester
- Svelte Code Checker
- Svelte Testing Library
- Cloudflare Workers
- Cloudflare Workers KV
- Cloudflare Images
- Cloudflare Turnstile
- Cloudflare Environments
- Cloudflare Compatibility Dates
- Cloudflare API Docs
- Cloudflare API Fundamentals
- Cloudflare Custom Domains
- Paypal Options
- Paypal API
- Paypal JS
- Printful API
- JSDOC + Typescript
- Vitest
- Jest
- Istanbul Code Coverage
- Zod
- Validator
- Sass
- PNPM
- Buffer
- Vite
- Wrangler
- Typescript
- Markdown
- Open Graph
- CSP
- Volta
- Weaviate
- Sveltekit + Turnstile
- Constructor Hover Typescript
- Vitest + Svelte
- Vitest + SvelteKit
- JEST + Fetch
- Jsdoc Extends
- Jsdoc Import
- Durable Object Counter
- Mongodb Stop Words
- Array Intersection
- Package.json + Bin + NPM Link
- Stop Readline
- Double type cast
- NPM to PNPM
- Cloudflare Worker Explanation
- Sveltekit + Sass
- Cloudflare Global Network
- Faster Websites
- Relative Time
- 5 Ways to Maximize the Security, Performance and Reliability of Your Online Business
- Cloudflare + MailChannels + DKIM
- Sveltekit page transitions
- SVG Viewbox
- Svelete Store + Local Storage
- Get Paypal Credentials
- Customize Paypal Checkout Page
- Transition between height 0 and auto
- Best Practices for Returns and Refunds in eCommerce
- SameSite cookies explained
- Everything you always wanted to know about touch icons
- Typescript + Browsers
- Jest + ES6
- Best time to publish on YouTube
- Node command line package
- Mongodb Full Text Search
- Mongodb Search Scoring
- Mongodb Search Analyzers
- Neo4j System
- Neo4j Access Control
- Neo4j Auth
- What is a graph
- Neo4j + LLM
- Cloudflare Cookies
- Cloudflare Database Integrations
- Sign and Verify Messages with Web Crypto API
- FS Open Write Files
- Deep Clone
- Squoosh
- SVG Icons
- Flowbite
- Jwt.io
- White to Grey Hex's
- CSP Validator
- DNS Checker
- Emoji's or [Command + Cotrol + Spacebar]
- Open Graph Preview
- SVG to PNG
- SVG Formatter
- AI Image Generator
- AI Photo to Art
- Movie Green Screen Videos
- MOV to GIF
- MailChannels: FREE for Infinite Outbound API Emails/month
- Namecheap: $8.16/year for Domain Registration
- Github Team: $4/month for 2G of storage
- Cloudflare Workers: $5/month for 285 servers allowing 10 million requests/month, 100,000 KV reads/day, 1,000 KV writes/day and 1 GB of KV storage allowed
- Proton Business: $19.98/month for a secure email inbox, calendar, and 1,000GB of cloud storage
- Install git
- Install node & npm
- Install nvm
- 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
pnpm dev
Validates code & then pushes to github main branch
pnpm mainPush
Deploy to production
pnpm mainDeploy
pnpm mainLogs
pnpm qaLogs
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
- 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"
}
}
- Add
src
folder AND put.js
or.svetle
code in there AND ensure all imports w/insrc
have.js
extension AND ensure noexports
aredefault
- IF adding a
typedefs.js
file and there are no imports in the file => at the end of the file addexport {}
- Create
./src/index.js
file and put all exports in there fromsrc
folder - IF svelte component is in
src
=> Export inindex.js
like this:export { default as Example } from './Example.svelte'
- IF svelte component is in
src
=> AddExample.svelte.d.ts
import { SvelteComponent } from 'svelte'
export default class Example extends SvelteComponent<{
css?: string
label?: string
href?: string
widthRem?: number
}> {}
- IF file in
src
updateswindow
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 {}
- Put all
src
files w/.js
extension intotsconfig.json
files array - Bash
pnpm tsc -p tsconfig.build.json -w
- Create
./src/index.ts
file and put all.d.ts
exports in there fromtsc
folder (only put extension as.d
), do not includeindex.d
- IF
src
folder has atypes.d.ts
file => Includeexport * from './types.d'
inindex.ts
file - IF svelte component is in
src
=> Export inindex.ts
like this:export { default as Example } from './Example.svelte'
- 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',
],
})
- Populate
esbuild.js
with all.js
files that will go from thetsc
folder to the thedist
folder - build options - 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
- IF Svelte component is in
src
=> Bash:pnpm add svelte -D
- IF Svelte component is in
src
=> addcp
like this:cp ./src/Example.svelte ./dist/Example.svelte
and addcp ./src/Example.svelte.d.ts ./dist/Example.svelte.d.ts
- IF
types.d.ts
is insrc
=> addcp
like this:cp ./src/types.d.ts ./dist/types.d.ts
- IF CSS files in
src
=> addcp
like this:cp ./src/example.css ./dist/example.css
- Add MIT
LICENSE
to root folder - Add
README.md
to root folder - Add to
README.md
## 🤓 Unit Tests
![Statements](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg?style=flat)
- 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
- IF
jest
tests will have any DOM tests or tests for any.svelte
files => Bashpnpm i jest-environment-jsdom -D
AND add tojest.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'
}
- IF
jest
tests will have any.svelte
files => Bashpnpm i @testing-library/svelte -D && pnpm i svelte-jester -D
AND add tojest.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
}
- Remove
main
frompackage.json
- Add
description
topackage.json
- 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"
}
}
- Update
package.json
[name
,keywords
,repository
,bugs
] - If there is a
svelte
component in this package add topackage.json
- guidance
{
"main": "./dist/index.js",
"svelte": "./dist/index.js",
}
- IF there is a
.css
file in./src
=> add topackage.json
{
"exports": {
".": "./dist/index.js",
"./index.css": "./dist/index.css"
},
}
- Bash
touch .gitignore
coverage
dist
node_modules
tsc
- 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
- Bash
pnpm build
- In another app link to this package locally
"example": "link:../example"
- Publish package to npm
pnpm whoami
pnpm login
pnpm publish --access public .
npm deprecate @sensethenlove/[email protected] "This project has been renamed. Install using @feelinglovelynow/toast instead."
"@ace/db": "file:../acedatabasefoundation/db",
"@ace/db": "git+https://github.com/acedatabasefoundation/db.git",
- Always allow ssh in the firewall
sudo ufw allow ssh
- Git Pull + Deploy
cd /var/www/feelinglovelynow && git pull && npm run build && pm2 restart index
- After updating sites available
sudo ln -s /etc/nginx/sites-available/feelinglovelynow /etc/nginx/sites-enabled/
sudo systemctl restart nginx