Working implementation

.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    mocha: true,
+    node: true,
+  },
+  plugins: ['mocha'],
+  extends: 'eslint:recommended',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    indent: ['error', 2],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+  },
+};

.github/workflows/build-dist.yml

@@ -1,47 +0,0 @@
-name: Build and PR dist changes
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  build-and-pr-dist:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
-
-      - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
-        with:
-          node-version: "lts/*"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build project
-        run: npm run build
-
-      - name: Check for dist changes
-        id: git-diff
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-          git add dist
-          if git diff --cached --quiet; then
-            echo "changed=false" >> $GITHUB_OUTPUT
-          else
-            echo "changed=true" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Create Pull Request for dist changes
-        if: steps.git-diff.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@v6
-        with:
-          commit-message: "chore(dist): update dist folder after build"
-          title: "chore(dist): update dist folder after build"
-          body: "This PR updates the dist folder with the latest build output."
-          branch: update-dist-after-build
-          add-paths: dist

.github/workflows/codeql-analysis.yml

@@ -22,15 +22,13 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v4
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/init@v3
         with:
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
+        uses: github/codeql-action/analyze@v3

.github/workflows/dependency-review.yml

@@ -9,9 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout Repository"
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
-
+        uses: actions/checkout@v4
       - name: "Dependency Review"
-        uses: actions/dependency-review-action@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3
+        uses: actions/dependency-review-action@v4

.github/workflows/ossf-scorecard.yml

@@ -1,43 +0,0 @@
-name: Scorecard supply-chain security
-on:
-  branch_protection_rule:
-  schedule:
-    - cron: '27 12 * * 2'
-  push:
-    branches: [ "main" ]
-
-permissions: read-all
-
-jobs:
-  analysis:
-    name: Scorecard analysis
-    runs-on: ubuntu-latest
-    if: github.event.repository.default_branch == github.ref_name || github.event_name == 'pull_request'
-    permissions:
-      security-events: write
-      id-token: write
-
-    steps:
-      - name: "Checkout code"
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
-
-      - name: "Run analysis"
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
-        with:
-          results_file: results.sarif
-          results_format: sarif
-          publish_results: true
-
-      - name: "Upload artifact"
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
-        with:
-          name: SARIF file
-          path: results.sarif
-          retention-days: 5
-
-      - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
-        with:
-          sarif_file: results.sarif

.github/workflows/publish.yml

@@ -16,9 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
+        uses: actions/checkout@v4
       - name: Get tag
         id: get_version
         run: echo VERSION=$(echo $GITHUB_REF | cut -d / -f 3) >> "$GITHUB_OUTPUT"
@@ -27,7 +25,7 @@ jobs:
         run: zip -r ../html5-boilerplate_${{ steps.get_version.outputs.VERSION }}.zip ./
       - name: Create Release
         id: create_release
-        uses: actions/create-release@0cb9c9b65d5d1901c1f53e5e66eaf4afd303e70e # v1.1.4
+        uses: actions/create-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -37,7 +35,7 @@ jobs:
           prerelease: false
       - name: Upload Release Asset
         id: upload-release-asset
-        uses: actions/upload-release-asset@e8f9f06c4b078e705bd2ea027f0926603fc9b4d5 # v1.0.2
+        uses: actions/upload-release-asset@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -46,9 +44,9 @@ jobs:
           asset_name: html5-boilerplate_${{ steps.get_version.outputs.VERSION }}.zip
           asset_content_type: application/zip
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - name: publish npm
         run: npm publish

.github/workflows/push-to-template.yml

@@ -21,11 +21,9 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
+      - uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4
         with:
           node-version: "lts/*"
       - name: Install dependencies

.github/workflows/spellcheck.yml

@@ -12,11 +12,8 @@ jobs:
   spellcheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
-        with:
-          persist-credentials: false
-
-      - uses: streetsidesoftware/cspell-action@dcd03dc3e8a59ec2e360d0c62db517baa0b4bb6d # v7.2.0
+      - uses: actions/checkout@v4
+      - uses: streetsidesoftware/cspell-action@v6
         with:
           inline: warning
           strict: false

.github/workflows/test-windows.yml

@@ -0,0 +1,35 @@
+name: Build status (Windows)
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: windows-latest
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+    steps:
+      - name: Get npm cache directory
+        id: npm-cache
+        run: |
+          echo "dir=$(npm config get cache)" >> "$GITHUB_OUTPUT"
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.npm-cache.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - uses: actions/checkout@v4
+      - name: Run tests ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm test

.github/workflows/test.yml

@@ -1,40 +1,34 @@
-name: Build status
+name: Build status (Ubuntu)
 
 on:
   push:
     branches: [main]
   pull_request:
     branches: [main]
-  workflow_dispatch:
 
 permissions:
   contents: read
 
 jobs:
   build:
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version:
-          - 20
-          - 22
-          - 24
-        os: [ubuntu-latest, windows-latest]
-
+        node-version: [18.x, 20.x]
     steps:
       - name: Get npm cache directory
         id: npm-cache
         run: |
           echo "dir=$(npm config get cache)" >> "$GITHUB_OUTPUT"
-      - uses: actions/cache@2f8e54208210a422b2efd51efaa6bd6d7ca8920f # v3.4.3
+      - uses: actions/cache@v3
         with:
           path: ${{ steps.npm-cache.outputs.dir }}
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+      - uses: actions/checkout@v4
       - name: Run tests ${{ matrix.node-version }}
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm ci

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "editorconfig.editorconfig",
-    "esbenp.prettier-vscode",
-    "streetsidesoftware.code-spell-checker"
-  ]
-}

.vscode/settings.json

@@ -1,15 +0,0 @@
-{
-  "[javascript][typescript][json][jsonc][markdown][yaml]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[javascript][typescript]": {
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "eslint.validate": ["javascript", "typescript"],
-  "editor.formatOnSave": true,
-  "editor.renderWhitespace": "all",
-  "files.trimTrailingWhitespace": true
-}

dist/index.html

@@ -26,7 +26,7 @@
 
   <!-- Add your site or application content here -->
   <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/app.js"></script>
+  <script src="scripts/app.js"></script>
 
 </body>
 

dist/package.json

@@ -14,11 +14,13 @@
     "build": "webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^13.0.1",
-    "html-webpack-plugin": "^5.6.4",
-    "webpack": "^5.101.3",
+    "copy-webpack-plugin": "^13.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.5",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.1",
     "webpack-merge": "^6.0.1"
   }
 }

dist/scripts/app.ts

@@ -0,0 +1,6 @@
+function foo(){
+    console.log("typescript");
+}
+foo();
+
+function yes(){}

dist/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "noImplicitAny": true,
+      "sourceMap": true,
+      "module": "es6",
+      "target": "es6",
+      "allowJs": true,
+      "moduleResolution": "node"
+    }
+  }

dist/webpack.common.js

@@ -1,12 +1,21 @@
-const path = require('path');
-
 module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devtool: 'inline-source-map',
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
   entry: {
-    app: './js/app.js',
+    app: './scripts/app.ts',
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    clean: true,
-    filename: './js/app.js',
+    filename: './scripts/app.js',
   },
 };

dist/webpack.config.prod.js

@@ -13,7 +13,6 @@ module.exports = merge(common, {
       patterns: [
         { from: 'img', to: 'img' },
         { from: 'css', to: 'css' },
-        { from: 'js/vendor', to: 'js/vendor' },
         { from: 'icon.svg', to: 'icon.svg' },
         { from: 'favicon.ico', to: 'favicon.ico' },
         { from: 'robots.txt', to: 'robots.txt' },

docs/about-this-repo.md

@@ -51,8 +51,7 @@ Our branch protection rules are as follows:
 - In addition to the PR and approving reviewer, we require three status checks
   to pass before code can be merged
   _ Build with Node 20
-  _ Build with Node 22
-  _ Build with Node 24
+  _ Build with Node 18
 - We _allow_ force pushes for project admins. While force pushes can create
   some head scratching moments for people who have cloned the repo and update
   before and after the force push, the ability to clean up the `HEAD` of a

eslint.config.mjs

@@ -1,30 +0,0 @@
-import globals from 'globals';
-import js from '@eslint/js';
-import mocha from 'eslint-plugin-mocha';
-import { defineConfig } from 'eslint/config';
-
-export default defineConfig([
-  {
-    files: ['**/*.js'],
-    plugins: {
-      js,
-      mocha,
-    },
-    languageOptions: {
-      ecmaVersion: 2020,
-      sourceType: 'module',
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.mocha,
-      },
-    },
-    extends: ['js/recommended'],
-    rules: {
-      // Your custom rules
-      indent: ['error', 2],
-      quotes: ['error', 'single'],
-      semi: ['error', 'always'],
-    },
-  },
-]);

gulpfile.mjs

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import gulp from 'gulp';
 import gulpAutoPrefixer from 'gulp-autoprefixer';
-import gulpEslint from 'gulp-eslint-new';
+import gulpEslint from 'gulp-eslint';
 import gulpHeader from 'gulp-header';
 import gulpRename from 'gulp-rename';
 import archiver from 'archiver';
@@ -120,7 +120,7 @@ gulp.task('copy:misc', () =>
 
 gulp.task('lint:js', () =>
   gulp
-    .src([`${dirs.src}/js/*.js`, `${dirs.src}/*.js`, `${dirs.test}/*.mjs`])
+    .src([`${dirs.src}/scripts/*.ts`,`${dirs.src}/scripts/*.js`, `${dirs.src}/*.js`, `${dirs.test}/*.mjs`])
     .pipe(gulpEslint())
     .pipe(gulpEslint.failOnError()),
 );

package.json

@@ -1,55 +1,46 @@
 {
   "name": "html5-boilerplate",
   "version": "9.0.1",
+  "homepage": "https://html5boilerplate.com/",
+  "license": "MIT",
   "description": "A professional front-end template for building fast, robust, and adaptable web apps or sites.",
   "keywords": [
     "h5bp",
     "template",
     "front-end"
   ],
-  "homepage": "https://html5boilerplate.com/",
-  "bugs": {
-    "url": "https://github.com/h5bp/html5-boilerplate/issues"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/h5bp/html5-boilerplate.git"
   },
-  "license": "MIT",
-  "files": [
-    "CHANGELOG.md",
-    "LICENSE.txt",
-    "package.json",
-    "dist/",
-    "README.md"
-  ],
+  "bugs": {
+    "url": "https://github.com/h5bp/html5-boilerplate/issues"
+  },
   "scripts": {
     "build": "gulp build",
     "prettier": "prettier --write ./**/*.{js,json,md,mjs,yml}",
     "test": "gulp archive && mocha --reporter spec --timeout 5000"
   },
   "devDependencies": {
-    "@eslint/js": "^9.35.0",
     "archiver": "^7.0.1",
-    "del": "^8.0.1",
-    "eslint": "^9.35.0",
-    "eslint-plugin-mocha": "^11.1.0",
-    "glob": "^11.1.0",
-    "globals": "^16.4.0",
-    "gulp": "^5.0.1",
+    "del": "^7.1.0",
+    "eslint": "^8.57.1",
+    "eslint-config-recommended": "^4.1.0",
+    "eslint-plugin-mocha": "^10.5.0",
+    "glob": "^11.0.1",
+    "gulp": "^5.0.0",
     "gulp-autoprefixer": "^9.0.0",
-    "gulp-eslint-new": "^2.4.0",
+    "gulp-eslint": "^6.0.0",
     "gulp-header": "^2.0.9",
-    "gulp-rename": "^2.1.0",
+    "gulp-rename": "^2.0.0",
     "main.css": "3.0.0",
-    "mocha": "^11.7.2",
-    "prettier": "3.6.2"
+    "mocha": "^11.1.0",
+    "prettier": "3.5.3",
+    "strip-json-comments": "^5.0.1"
   },
   "engines": {
-    "node": ">=20"
-  },
-  "volta": {
-    "node": "20.19.1"
+    "node": ">=18",
+    "npm": ">=10"
   },
   "h5bp-configs": {
     "directories": {
@@ -58,5 +49,12 @@
       "src": "src",
       "test": "test"
     }
-  }
+  },
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE.txt",
+    "package.json",
+    "dist/",
+    "README.md"
+  ]
 }

src/index.html

@@ -26,7 +26,7 @@
 
   <!-- Add your site or application content here -->
   <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/app.js"></script>
+  <script src="scripts/app.js"></script>
 
 </body>
 

src/package.json

@@ -14,11 +14,13 @@
     "build": "webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^13.0.1",
-    "html-webpack-plugin": "^5.6.4",
-    "webpack": "^5.101.3",
+    "copy-webpack-plugin": "^13.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.5",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
+    "webpack-dev-server": "^5.2.1",
     "webpack-merge": "^6.0.1"
   }
 }

src/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "noImplicitAny": true,
+      "sourceMap": true,
+      "module": "es6",
+      "target": "es6",
+      "allowJs": true,
+      "moduleResolution": "node"
+    }
+  }

src/webpack.common.js

@@ -1,12 +1,21 @@
-const path = require('path');
-
 module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devtool: 'inline-source-map',
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
   entry: {
-    app: './js/app.js',
+    app: './scripts/app.ts',
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    clean: true,
-    filename: './js/app.js',
+    filename: './scripts/app.js',
   },
 };

src/webpack.config.prod.js

@@ -13,7 +13,6 @@ module.exports = merge(common, {
       patterns: [
         { from: 'img', to: 'img' },
         { from: 'css', to: 'css' },
-        { from: 'js/vendor', to: 'js/vendor' },
         { from: 'icon.svg', to: 'icon.svg' },
         { from: 'favicon.ico', to: 'favicon.ico' },
         { from: 'robots.txt', to: 'robots.txt' },