DOCSEARCHbyAlgolia
Submit Docs

Octopop Documentation

website·Indexed 30 days ago

https://bucharitesh.github.io/octopop

Documentation for Octopop, featuring a utility library with API functions for URL manipulation, domain validation, date-time formatting, and hashing, as well as installation guides for Tailwind, Prettier, and TypeScript configuration.

Tokens
8.3K
Snippets
70
Records
84
Agent score
72%

What's inside Octopop

  1. Octopop Core Design Principles

    Octopop is built with the following architectural goals:

    • Cross-platform: Compatible with MacOS, Windows, and Linux.
    • Type-safe: Uses TypeScript to provide a strict and ergonomic API.
    • Async-first: All APIs and abstractions are engineered as async-first for performance and portability.
    • Low dependency: Minimizes external dependencies to reduce lock file churn and security vulnerabilities.
    • Convention & Configuration: Balances consistent default patterns with customizable integration options.
    • Environment Agnostic: Can be used in server-side and client-side environments, including web apps, CLI tools, and packages.

  2. Understand Octopop package environment compatibility

    Octopop packages are categorized by their supported runtime environments. Compatibility is indicated by badges in the specific package documentation:

    • Backend: Usable on the server-side via Node.js.
    • Frontend: Usable on the client-side via a web browser.
    • Tooling: Usable within a command line application or an npm module/package.

  4. Octopop system and runtime requirements

    To use Octopop packages, the following environment requirements must be met:

    • Operating Systems: Linux, OSX, or Windows
    • Backend and Tooling: Node.js v16.20 or higher
    • Frontend: Edge, Chrome, or Firefox browsers

  8. Use the @octopop/tsconfig base configuration

    The base.json configuration provides a strict default TypeScript setup. Key settings include strict: true, esModuleInterop: true, isolatedModules: true, and noEmit: true. It excludes node_modules by default.
    {
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "inlineSources": false,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true
  },
  "exclude": ["node_modules"]
}

  10. Use the @octopop/tsconfig Next.js configuration

    The next.json configuration extends the base config and is optimized for Next.js projects. It includes the next plugin, sets jsx to preserve, targets es5, and includes the src directory and next-env.d.ts.
    {
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js",
  "extends": "./base.json",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "allowJs": true,
    "declaration": false,
    "declarationMap": false,
    "incremental": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "resolveJsonModule": true,
    "strict": false,
    "target": "es5"
  },
  "include": ["src", "next-env.d.ts"],
  "exclude": ["node_modules"]
}

  11. Extend a project tsconfig with @octopop/tsconfig

    To use a pre-defined configuration from @octopop/tsconfig, add an extends property to your project's tsconfig.json file pointing to the desired configuration path (e.g., base, next, or react-library).
    {
  "extends": "@octopop/tsconfig/base"
}

  12. Use Framer Motion animation settings

    The library provides several constant configuration objects for animations, likely intended for use with Framer Motion: FADE_IN_ANIMATION_SETTINGS, FRAMER_MOTION_LIST_ITEM_VARIANTS, STAGGER_CHILD_VARIANTS, and SWIPE_REVEAL_ANIMATION_SETTINGS.