Rewrite project

.editorconfig

@@ -1,9 +1,9 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
+indent_style = space
 insert_final_newline = true
+trim_trailing_whitespace = true

.github/workflows/main.yml

@@ -1,27 +1,23 @@
-name: main
-on:
-  push:
-    branches:
-      - website
 jobs:
   main:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-        with:
-          persist-credentials: false
-      - uses: dcodeIO/setup-node-nvm@master
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: node
       - run: npm install
       - run: npm test
-      - name: Deploy
-        uses: JamesIves/[email protected]
+      - uses: JamesIves/github-pages-deploy-action@releases/v4
         with:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          BRANCH: gh-pages
-          FOLDER: dest
-          SINGLE_COMMIT: true
-          COMMIT_MESSAGE: .
-          GIT_CONFIG_NAME: Titus Wormer
-          GIT_CONFIG_EMAIL: [email protected]
+          branch: gh-pages
+          commit-message: .
+          folder: dest
+          git-config-email: [email protected]
+          git-config-name: Titus Wormer
+          single-commit: true
+name: main
+on:
+  push:
+    branches:
+      - website

.gitignore

@@ -1,5 +1,8 @@
-.DS_Store
+*.d.ts
 *.log
-node_modules/
+*.map
+*.tsbuildinfo
+.DS_Store
 dest/
+node_modules/
 yarn.lock

.npmrc

@@ -1 +1,2 @@
+ignore-scripts=true
 package-lock=false

package.json

@@ -1,65 +1,85 @@
 {
-  "name": "www-f-ck",
-  "private": true,
-  "license": "MIT",
-  "repository": "wooorm/f-ck",
-  "bugs": "https://github.com/wooorm/f-ck/issues",
   "author": "Titus Wormer <[email protected]> (https://wooorm.com)",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ],
+  "bugs": "https://github.com/wooorm/f-ck/issues",
   "contributors": [
     "Titus Wormer <[email protected]> (https://wooorm.com)"
   ],
-  "type": "module",
   "devDependencies": {
-    "cssnano": "^5.0.0",
-    "esbuild": "^0.13.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "cssnano": "^7.0.0",
+    "devlop": "^1.1.0",
+    "esbuild": "^0.24.0",
     "f-ck": "^2.0.0",
-    "postcss-cli": "^9.0.0",
-    "prettier": "^2.0.0",
-    "rehype-cli": "^11.0.0",
-    "rehype-preset-minify": "^6.0.0",
-    "rehype-prevent-favicon-request": "^3.0.0",
-    "remark-cli": "^10.0.0",
-    "remark-preset-wooorm": "^9.0.0",
-    "stylelint": "^14.0.0",
-    "stylelint-config-standard": "^23.0.0",
-    "xo": "^0.46.0"
-  },
-  "scripts": {
-    "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix && stylelint src/index.css --fix",
-    "build:js": "esbuild src/index.js --bundle --minify --target=es6 --outfile=dest/index.nomodule.js && esbuild src/index.js --bundle --minify --target=es2020 --format=esm --outfile=dest/index.module.js",
-    "build:css": "postcss src/index.css > dest/index.css",
-    "build:html": "rehype -u preset-minify -u prevent-favicon-request src/index.html -o dest",
-    "build": "npm run build:js && npm run build:css && npm run build:html",
-    "test": "npm run format && npm run build"
-  },
-  "stylelint": {
-    "extends": "stylelint-config-standard"
-  },
-  "prettier": {
-    "tabWidth": 2,
-    "useTabs": false,
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "semi": false,
-    "trailingComma": "none"
-  },
-  "xo": {
-    "prettier": true,
-    "rules": {
-      "no-var": "off",
-      "unicorn/prefer-dom-node-append": "off"
-    }
+    "postcss-cli": "^11.0.0",
+    "postcss-preset-env": "^10.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rehype-cli": "^12.0.0",
+    "rehype-preset-minify": "^7.0.0",
+    "rehype-prevent-favicon-request": "^4.0.0",
+    "remark-cli": "^12.0.0",
+    "remark-preset-wooorm": "^10.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "type-coverage": "^2.0.0",
+    "typescript": "^5.0.0",
+    "xo": "^0.59.0"
   },
+  "license": "MIT",
+  "name": "www-f-ck",
   "postcss": {
     "plugins": {
+      "postcss-preset-env": {},
       "cssnano": {
         "preset": "default"
       }
     }
   },
+  "prettier": {
+    "bracketSpacing": false,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "none",
+    "useTabs": false
+  },
+  "private": true,
   "remarkConfig": {
     "plugins": [
-      "preset-wooorm"
+      "remark-preset-wooorm"
     ]
+  },
+  "repository": "wooorm/f-ck",
+  "typeCoverage": {
+    "atLeast": 100,
+    "strict": true
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsc --build --clean && tsc --build && type-coverage",
+    "format": "remark --frail --output --quiet -- . && prettier --log-level warn --write -- . && xo --fix && stylelint src/index.css --fix",
+    "generate:css": "postcss --output dest/index.css -- src/index.css",
+    "generate:html": "rehype --frail --output dest/ --quiet --use rehype-preset-minify --use rehype-prevent-favicon-request -- src/",
+    "generate:js:module": "esbuild src/index.js --bundle --conditions=browser,production --define:process.env.NODE_ENV=\\\"production\\\" --format=esm --log-level=warning --minify --outfile=dest/index.module.js --target=es2020",
+    "generate:js:nomodule": "esbuild src/index.js --bundle --conditions=browser,production --define:process.env.NODE_ENV=\\\"production\\\" --log-level=warning --minify --outfile=dest/index.nomodule.js --target=es6",
+    "generate:js": "npm run generate:js:module && npm run generate:js:nomodule",
+    "generate": "npm run generate:css && npm run generate:html && npm run generate:js",
+    "test": "npm run build && npm run format && npm run generate"
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard"
+  },
+  "xo": {
+    "prettier": true,
+    "rules": {
+      "unicorn/prefer-at": "off"
+    }
   }
 }

src/index.css

@@ -1,8 +1,3 @@
-:root {
-  color-scheme: light dark;
-  background-color: hsl(0deg 0% 90%);
-}
-
 a {
   color: #0367d8;
 }
@@ -13,12 +8,17 @@ body {
   max-width: 30em;
 }
 
+html {
+  background-color: hsl(0deg 0% 90%);
+  color-scheme: light dark;
+}
+
 output {
   font-weight: bold;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  html {
     background-color: hsl(214deg 13% 10%);
     color: hsl(214deg 13% 90%);
   }

src/index.html

@@ -1,8 +1,8 @@
 <!doctype html>
 <meta charset=utf8>
-<meta content=width=device-width,initial-scale=1 name=viewport>
 <title>f-ck</title>
-<link rel=stylesheet href=index.css>
+<meta content=initial-scale=1,width=device-width name=viewport>
+<link href=index.css rel=stylesheet>
 <h1>f-ck</h1>
 <p>A quick demo of <a href=https://github.com/wooorm/f-ck>f-ck</a>.
 <p>Please raise any issues on <a href=https://github.com/wooorm/f-ck/issues>GitHub</a>.
@@ -15,8 +15,8 @@ <h1>f-ck</h1>
       <option>grawlix
     </select>
   </label>
-  <input spellcheck=false autofocus value=butt>
+  <input autofocus spellcheck=false value=butt>
   <output></output>
 </p>
-<script type=module src=index.module.js></script>
+<script src=index.module.js type=module></script>
 <script nomodule src=index.nomodule.js></script>

src/index.js

@@ -1,17 +1,24 @@
 /* eslint-env browser */
 
+import {ok as assert} from 'devlop'
 import * as fck from 'f-ck'
 
 const input = document.querySelector('input')
 const output = document.querySelector('output')
 const select = document.querySelector('select')
+assert(input)
+assert(select)
 
 change()
 
 input.addEventListener('input', change)
 select.addEventListener('change', change)
 
 function change() {
-  const fn = select.selectedOptions[0].textContent
-  output.value = fck[fn](input.value)
+  assert(input)
+  assert(output)
+  assert(select)
+  const name = select.selectedOptions[0].textContent
+  assert(name === 'grawlix' || name === 'inner' || name === 'vowel')
+  output.value = fck[name](input.value)
 }

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "customConditions": ["development"],
+    "declarationMap": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "exactOptionalPropertyTypes": true,
+    "lib": ["dom", "es2023"],
+    "module": "node16",
+    "strict": true,
+    "target": "es2023"
+  },
+  "exclude": ["dest/", "node_modules/"],
+  "include": ["**/*.js"]
+}