search

Mischback / colorizer

A simple web-based colorscheme builder which focuses on contrast values.
https://mischback.github.io/colorizer/
MIT License
1 stars 0 forks source link

Switch to ``TypeScript`` #11

Open Mischback opened 1 year ago

Mischback commented 1 year ago

As of now, this is a typical JS-related project: "Oh, let's just kluge this together quickly..." - "Hey, let's put at least some comments into it..." - "Oh fuck, the JS code is about 10.000 LoC and no longer maintainable!!!"

This issue is not about switching to TypeScript because TypeScript is nicer than VanillaJS, it's about structuring the codebase better, having clearly defined interfaces and at least some type safety.

Mischback commented 1 year ago

Resources

Mischback commented 1 year ago

WiP TypeScript configuration

Starting point was here and is based on the vanilla-ts setup if ViteJS playground.

{
  "compilerOptions": {
    /* The compilation target.
     *
     * https://www.typescriptlang.org/tsconfig#target
     *
     * "ES2020" is from ``ViteJS``'s reference configuration and rather modern,
     * so this may the tuned down. "ES6" should be well supported by all major
     * browsers.
     *
     * TODO: Start with "ES6"/"ES2015" and just go up when required!
     */
    "target": "es6",
    /* https://www.typescriptlang.org/tsconfig#useDefineForClassFields
     *
     * ``true` ` is from ``ViteJS``'s reference configuration and seems to be
     * rather modern.
     */
    "useDefineForClassFields": true,
    /* The module resolution system.
     *
     * https://www.typescriptlang.org/tsconfig#module
     *
     * "ESNext" is from ``ViteJS``'s reference configuration and rather modern,
     * so, as "target" is tuned down to "ES6"/"ES2015", this value is also adjusted.
     */
    "module": "es6",
    /* Adjust available *libraries*. This is meant to provide typings for JS runtime features.
     *
     * https://www.typescriptlang.org/tsconfig#lib
     * a
     * This included "ES2020" (from ``ViteJS``'s reference configuration). As "target"
     * and "module" are tuned down, this is adjusted, too.
     */
    "lib": ["es6", "DOM", "DOM.Iterable"],
    /* https://www.typescriptlang.org/tsconfig#skipLibCheck
     *
     * ``ViteJS``'s reference config is ``true``, but there *should* be no issues
     * for this project. Activating these checks until they cause problems.
     */
    "skipLibCheck": false,

    /*** Bundler mode ***/

    /* Don't emit the compilation result.
     *
     * https://www.typescriptlang.org/tsconfig#noEmit
     *
     * The TypeScript compilation is handled by ``Rollup`` and its ``plugin-typescript``.
     */
    "noEmit": true,
    /* How are modules resolved?
     *
     * https://www.typescriptlang.org/tsconfig#moduleResolution
     * https://www.typescriptlang.org/docs/handbook/module-resolution.html
     *
     * "bundler" is a ``TypeScript 5`` feature. This works with ``Rollup`` and is
     * meant to use/support ES6 native modules.
     */
    "moduleResolution": "bundler",
    /* Allow imports that include the ``.ts`` extension.
     *
     * https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
     *
     * This is from ``ViteJS``'s reference configuration, but should not be
     * required and it reads as if it is not actually desired.
     * It causes an error/warning in ``Rollup``'s compilation process.
     *
     * FIXME: Set to ``false`` and verify that this is working correctly!
     * FIXME: ``false`` is most likely the default value anyway, so this might be removed!
     */
    "allowImportingTsExtensions": true,
    /* Allow importing JSON files.
     *
     * https://www.typescriptlang.org/tsconfig#resolveJsonModule
     *
     * This is from ``ViteJS``'s reference configuration, but is - most likely - not
     * required in the codebase.
     *
     * FIXME: Set to ``fase`` and verify that this is still working correctly!
     * FIXME: ``false`` is most likely the default value anyway, so this might be removed!
     */
    "resolveJsonModule": true,
    /* Make TypeScript play nicely with external bundlers, like ``Rollup``.
     *
     * https://www.typescriptlang.org/tsconfig#isolatedModules
     *
     * Taken from ``ViteJS``'s reference configuration.
     */
    "isolatedModules": true,

    /*** Linting ***/

    /* Activate TypeScript's strictest ruleset.
     *
     * https://www.typescriptlang.org/tsconfig#strict
     */
    "strict": true,
    /* Raise compilation error for unreachable code.
     *
     * https://www.typescriptlang.org/tsconfig#allowUnreachableCode
     */
    "allowUnreachableCode": false,
    /* Raise compilation errors for unused labels.
     *
     * https://www.typescriptlang.org/tsconfig#allowUnusedLabels
     */
    "allowUnusedLabels": false,
    /* Be really strict about *optional properties*.
     *
     * https://www.typescriptlang.org/tsconfig#exactOptionalPropertyTypes
     */
    "exactOptionalPropertyTypes": true,
    /* ``case`` blocks must have ``return`` or ``break``.
     *
     * https://www.typescriptlang.org/tsconfig#noFallthroughCasesInSwitch
     */
    "noFallthroughCasesInSwitch": true,
    /* Overriding methods in class inheritance must be explicit.
     *
     * https://www.typescriptlang.org/tsconfig#noImplicitOverride
     */
    "noImplicitOverride": true,
    /* Non-void functions must have ``return`` statements.
     *
     * https://www.typescriptlang.org/tsconfig#noImplicitReturns
     */
    "noImplicitReturns": true,
    /* No implicit ``this``.
     *
     * https://www.typescriptlang.org/tsconfig#noImplicitThis
     *
     * FIXME: Activated by ``strict: true``, but this may cause typing
     *        problems for working code.
     */
    /* "noImplicitThis": true, */
    /* [Opinionated] Prohibit access to undefined properties using the *dot-syntax*.
     *
     * https://www.typescriptlang.org/tsconfig#noPropertyAccessFromIndexSignature
     */
    "noPropertyAccessFromIndexSignature": true,
    /* Undeclared fields in a type definition have an implicit ``undefined``.
     *
     * https://www.typescriptlang.org/tsconfig#noUncheckedIndexedAccess
     *
     * TODO: This doesn't seem to be really desired...
     */
    "noUncheckedIndexedAccess": true,
    /* Unused locals and parameters are flagged as errors.
     *
     * https://www.typescriptlang.org/tsconfig#noUnusedLocals
     * https://www.typescriptlang.org/tsconfig#noUnusedParameters
     */
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  /* Specify the source files:
   *
   * https://www.typescriptlang.org/tsconfig#include
   */
  "include": ["src/script/**/*.ts"],
  "$schema": "https://json.schemastore.org/tsconfig",
}

WiP Rollup configuration

(Plugins must be available. Include in package.json)

import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';
import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/script/index.ts",
  output: [
    {
      file: "dist/assets/colorizer.js",
      /* https://rollupjs.org/configuration-options/#output-format
       *
       * "es" or "iife"?!
       */
      format: "es",
    },
    {
      file: "dist/assets/colorizer.min.js",
      format: "es",
      plugins: [terser()]
  ]
  plugins: [
    resolve(),
    typescript()
  ],
};
Mischback commented 1 year ago

Rollup transpiles TypeScript sources, but I assume that it does not actually run tsc to perform the typechecking and it does perform the typechecking.

# FIXME: Add this stamp as dependency for building the script bundle to
#        ensure that typechecking is run permanently
STAMP_TYPECHECKED := $(STAMP_DIR)/typechecked

util/lint/typechecking : $(STAMP_TYPECHECKED)
.PHONY : util/lint/typechecking

$(STAMP_TYPECHECKED) : $(SRC_SCRIPT) tsconfig.json | $(STAMP_NODE_READY)
    npx tsc --project tsconfig.json

Should this also be included to .lintstagedrc.json? Yes, it is!