Add TypeScript

babel.config.js

@@ -0,0 +1,3 @@
+export default {
+  presets: ['@babel/preset-typescript'],
+};

package.json

@@ -27,23 +27,30 @@
     "watch:scripts": "npm run build-dev:scripts -- -w",
     "build:11ty": "eleventy --config=.eleventy.cjs",
     "watch:11ty": "eleventy --config=.eleventy.cjs --serve",
-    "lint": "prettier --write .",
+    "tsc": "tsc",
+    "prettier": "prettier --write .",
+    "lint": "run-s prettier tsc",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-inject": "^5.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.3.0",
+    "@types/jquery": "^3.5.16",
+    "@types/jqueryui": "^1.12.16",
+    "@types/node": "^18.11.18",
     "jquery": "^3.6.3",
     "jquery-ui": "^1.13.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.2",
     "rollup": "^3.9.1",
-    "sass": "^1.57.1"
+    "sass": "^1.57.1",
+    "typescript": "^4.9.4"
   }
 }

rollup.config.js

@@ -3,29 +3,33 @@ import commonjs from '@rollup/plugin-commonjs';
 import inject from '@rollup/plugin-inject';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
+import { defineConfig } from 'rollup';
 
 const prod = process.env.BABEL_ENV === 'production';
 
 const plugins = [
-  nodeResolve({ browser: true }),
+  nodeResolve({
+    extensions: ['.mjs', '.js', '.json', '.node', '.ts'],
+    browser: true,
+  }),
   commonjs(),
+  babel({ extensions: ['.js', '.ts'], babelHelpers: 'bundled' }),
   inject({
     $: 'jquery',
     jQuery: 'jquery',
   }),
-  babel({ babelHelpers: 'bundled' }),
 ];
 
 if (prod) {
   plugins.push(terser());
 }
 
-export default {
-  input: 'source/assets/js/sass.js',
+export default defineConfig({
+  input: 'source/assets/js/sass.ts',
   output: {
     file: 'source/assets/dist/js/sass.js',
     format: 'iife',
     sourcemap: !prod,
   },
   plugins,
-};
+});

source/assets/dist/css/noscript.css

@@ -1 +0,0 @@
-.page-sections li a.section::after{transform:rotate(90deg)}.page-sections li a.section+ul{display:block}@media screen and (max-width: 93.750000625rem){body.documentation .code-example ul{display:none}body.documentation .code-example .ui-tabs-panel{position:relative}body.documentation .code-example .ui-tabs-panel pre::after{position:absolute;top:5px;right:5px;opacity:.5}body.documentation .code-example .scss pre::after{content:"SCSS"}body.documentation .code-example .sass pre::after{content:"Sass"}body.documentation .code-example .css{display:block}body.documentation .code-example .css pre::after{content:"CSS"}}@media screen and (max-width: 62.500000625rem){body.guide .code-example ul{display:none}body.guide .code-example .ui-tabs-panel{position:relative}body.guide .code-example .ui-tabs-panel pre::after{position:absolute;top:5px;right:5px;opacity:.5}body.guide .code-example .scss pre::after{content:"SCSS"}body.guide .code-example .sass pre::after{content:"Sass"}body.guide .code-example .css{display:block}body.guide .code-example .css pre::after{content:"CSS"}}/*# sourceMappingURL=noscript.css.map */

source/assets/dist/css/noscript.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/noscript.scss"],"names":[],"mappings":"AAQE,2DACA,6CA2BF,+CAtBI,iDAEA,gDACE,kBAEA,2DACE,kBACA,QACA,UACA,WAIJ,iEACA,iEACA,sCACE,cACA,gEASN,+CA1BI,yCAEA,wCACE,kBAEA,mDACE,kBACA,QACA,UACA,WAIJ,yDACA,yDACA,8BACE,cACA","file":"noscript.css"}

source/assets/js/components/impl-status.ts

@@ -1,14 +1,14 @@
 $(function () {
   $('.impl-status').each(function () {
     var statusBar = $(this);
-    var expandLink = $(this).find('a');
+    var expandLink = statusBar.find('a');
     if (expandLink == null) return;
 
-    var details = $(this).next();
+    var details = statusBar.next();
     if (!details.hasClass('sl-c-callout')) return;
 
     details.hide();
-    expandLink.click(function () {
+    expandLink.on('click', function () {
       details.toggle();
       expandLink.toggleClass('expanded');
     });

source/assets/js/components/list-navigation.ts

@@ -2,7 +2,7 @@ $(function () {
   $('.sl-c-list-navigation-wrapper--collapsible li > ul')
     .parent()
     .children('a')
-    .click(function () {
+    .on('click', function () {
       $(this).toggleClass('open');
       return false;
     });

source/assets/js/components/navigation.ts

@@ -6,7 +6,11 @@ $(function () {
 
   // Added sticky class when window top is great than nav top
   function stickyNav() {
-    if (nav.length > 0 && $(window).scrollTop() >= sticky.top) {
+    if (
+      nav.length > 0 &&
+      sticky &&
+      ($(window).scrollTop() ?? 0) >= sticky.top
+    ) {
       $('.sl-l-medium-holy-grail__body').addClass('sl-js-nav--is-sticky');
     } else {
       $('.sl-l-medium-holy-grail__body').removeClass('sl-js-nav--is-sticky');
@@ -14,7 +18,7 @@ $(function () {
   }
 
   // When scrolling the page, execute stickyNav
-  $(window).scroll(function () {
+  $(window).on('scroll', function () {
     stickyNav();
   });
 

source/assets/js/components/redirect.ts

@@ -3,7 +3,7 @@
 // user to that documentation.
 if (window.location.hash) {
   if (window.location.pathname == '/documentation') {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#syntax': '/documentation/syntax',
       '#using_sass': '/install',
       '#rackrailsmerb_plugin': 'https://github.com/rails/sass-rails',
@@ -102,7 +102,7 @@ if (window.location.hash) {
         '/documentation/js-api/interfaces/LegacySharedOptions#functions',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
 
     // If the user is looking for a Ruby Sass option, redirect them to the Ruby
     // Sass page for an explanation that it's deprecated.
@@ -112,7 +112,7 @@ if (window.location.hash) {
 
     if (redirect) window.location.href = redirect;
   } else if (window.location.pathname == '/documentation/modules') {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#declare-class_method': '/ruby-sass',
       '#random_number_generator-class_method': '/ruby-sass',
       '#random_seed=-class_method': '/ruby-sass',
@@ -218,45 +218,45 @@ if (window.location.hash) {
       '#zip-instance_method': '/documentation/modules/list#zip',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
     if (redirect) window.location.href = redirect;
   } else if (window.location.pathname == '/documentation/modules/color') {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#rgb': '/documentation/modules#rgb',
       '#rgba': '/documentation/modules#rgba',
       '#hsl': '/documentation/modules#hsl',
       '#hsla': '/documentation/modules#hsla',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
     if (redirect) window.location.href = redirect;
   } else if (window.location.pathname == '/documentation/modules/map') {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#keywords': '/documentation/modules/meta#keywords',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
     if (redirect) window.location.href = redirect;
   } else if (window.location.pathname == '/documentation/at-rules/use') {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#configuring-modules': '/documentation/at-rules/use#configuration',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
     if (redirect) window.location.href = redirect;
   } else if (
     window.location.pathname == '/documentation/syntax/special-functions'
   ) {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#calc-clamp-element-progid-and-expression':
         '/documentation/syntax/special-functions#element-progid-and-expression',
       '#min-and-max': '/documentation/values/calculations#min-and-max',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
     if (redirect) window.location.href = redirect;
   } else if (window.location.pathname == '/documentation/js-api') {
-    var redirects = {
+    var redirects: Record<string, string> = {
       '#rendersync': '/documentation/js-api/modules#renderSync',
       '#render': '/documentation/js-api/modules#render',
       '#info': '/documentation/js-api/modules#info',
@@ -378,8 +378,6 @@ if (window.location.hash) {
       '#list-setseparator-comma':
         '/documentation/js-api/classes/types.List#setSeparator',
       '#types-map': '/documentation/js-api/classes/types.Map',
-      '#new-types-map-length':
-        '/documentation/js-api/classes/types.Map#constructor',
       '#new-types-map-length':
         '/documentation/js-api/classes/types.Map#constructor',
       '#map-getkey-index': '/documentation/js-api/classes/types.Map#getKey',
@@ -392,7 +390,7 @@ if (window.location.hash) {
       '#types-null-null': '/documentation/js-api/classes/types.Null#NULL',
     };
 
-    var redirect = redirects[window.location.hash];
+    var redirect: string | undefined = redirects[window.location.hash];
     if (redirect) window.location.href = redirect;
   }
 }

source/assets/js/vendor/html5-boilerplate/plugins.ts

@@ -15,8 +15,8 @@
     method = methods[length];
 
     // Only stub undefined methods.
-    if (!console[method]) {
-      console[method] = noop;
+    if (!(console as any)[method]) {
+      (console as any)[method] = noop;
     }
   }
 }());

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "node16",
+    "target": "es2022",
+    "moduleResolution": "Node16",
+    "strict": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  },
+  "include": ["source/**/*.ts"],
+  "exclude": ["node_modules"]
+}

yarn.lock

@@ -796,6 +796,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-typescript@npm:^7.20.0":
+  version: 7.20.0
+  resolution: "@babel/plugin-syntax-typescript@npm:7.20.0"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.19.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 6189c0b5c32ba3c9a80a42338bd50719d783b20ef29b853d4f03929e971913d3cefd80184e924ae98ad6db09080be8fe6f1ffde9a6db8972523234f0274d36f7
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-arrow-functions@npm:^7.18.6":
   version: 7.20.7
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.20.7"
@@ -1152,6 +1163,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-typescript@npm:^7.18.6":
+  version: 7.20.7
+  resolution: "@babel/plugin-transform-typescript@npm:7.20.7"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": ^7.20.7
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/plugin-syntax-typescript": ^7.20.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: ca569a1b8001e7e8971874656091789c6b3209f155c91c56bce82b545e43d09d156b4fcf2f0dfcdf7911a2c546c7090c2aff167a5692443f6f0382b358c233e0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-escapes@npm:^7.18.10":
   version: 7.18.10
   resolution: "@babel/plugin-transform-unicode-escapes@npm:7.18.10"
@@ -1275,6 +1299,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-typescript@npm:^7.18.6":
+  version: 7.18.6
+  resolution: "@babel/preset-typescript@npm:7.18.6"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-validator-option": ^7.18.6
+    "@babel/plugin-transform-typescript": ^7.18.6
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 7fe0da5103eb72d3cf39cf3e138a794c8cdd19c0b38e3e101507eef519c46a87a0d6d0e8bc9e28a13ea2364001ebe7430b9d75758aab4c3c3a8db9a487b9dc7c
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.8.4":
   version: 7.20.7
   resolution: "@babel/runtime@npm:7.20.7"
@@ -1620,6 +1657,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jquery@npm:*, @types/jquery@npm:^3.5.16":
+  version: 3.5.16
+  resolution: "@types/jquery@npm:3.5.16"
+  dependencies:
+    "@types/sizzle": "*"
+  checksum: 13c995f15d1c2f1d322103dc1cb0a22b95eecc3e7546f00279b8731aea21d7ec04550af40e609ee48e755d4e11bf61c25b4aa9f53df3bcbec4b8fe8e81471732
+  languageName: node
+  linkType: hard
+
+"@types/jqueryui@npm:^1.12.16":
+  version: 1.12.16
+  resolution: "@types/jqueryui@npm:1.12.16"
+  dependencies:
+    "@types/jquery": "*"
+  checksum: a39a2b5c26a2b1341f50af49957b17a36423bdd6300c2a9188b1adc0d263f3e31255e8f2f77ffd59f750ede6cc713c84c9c88cdc6d43fa7d88949a40679f8a5e
+  languageName: node
+  linkType: hard
+
 "@types/minimatch@npm:^3.0.3":
   version: 3.0.5
   resolution: "@types/minimatch@npm:3.0.5"
@@ -1634,6 +1689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.11.18":
+  version: 18.11.18
+  resolution: "@types/node@npm:18.11.18"
+  checksum: 03f17f9480f8d775c8a72da5ea7e9383db5f6d85aa5fefde90dd953a1449bd5e4ffde376f139da4f3744b4c83942166d2a7603969a6f8ea826edfb16e6e3b49d
+  languageName: node
+  linkType: hard
+
 "@types/resolve@npm:1.20.2":
   version: 1.20.2
   resolution: "@types/resolve@npm:1.20.2"
@@ -1641,6 +1703,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/sizzle@npm:*":
+  version: 2.3.3
+  resolution: "@types/sizzle@npm:2.3.3"
+  checksum: 586a9fb1f6ff3e325e0f2cc1596a460615f0bc8a28f6e276ac9b509401039dd242fa8b34496d3a30c52f5b495873922d09a9e76c50c2ab2bcc70ba3fb9c4e160
+  languageName: node
+  linkType: hard
+
 "a-sync-waterfall@npm:^1.0.0":
   version: 1.0.1
   resolution: "a-sync-waterfall@npm:1.0.1"
@@ -5104,17 +5173,22 @@ __metadata:
     "@11ty/eleventy": ^1.0.2
     "@babel/core": ^7.20.12
     "@babel/preset-env": ^7.20.2
+    "@babel/preset-typescript": ^7.18.6
     "@rollup/plugin-babel": ^6.0.3
     "@rollup/plugin-commonjs": ^24.0.0
     "@rollup/plugin-inject": ^5.0.3
     "@rollup/plugin-node-resolve": ^15.0.1
     "@rollup/plugin-terser": ^0.3.0
+    "@types/jquery": ^3.5.16
+    "@types/jqueryui": ^1.12.16
+    "@types/node": ^18.11.18
     jquery: ^3.6.3
     jquery-ui: ^1.13.2
     npm-run-all: ^4.1.5
     prettier: ^2.8.2
     rollup: ^3.9.1
     sass: ^1.57.1
+    typescript: ^4.9.4
   languageName: unknown
   linkType: soft
 
@@ -5735,7 +5809,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.6.2":
+"typescript@npm:^4.6.2, typescript@npm:^4.9.4":
   version: 4.9.4
   resolution: "typescript@npm:4.9.4"
   bin:
@@ -5745,7 +5819,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.6.2#~builtin<compat/typescript>":
+"typescript@patch:typescript@^4.6.2#~builtin<compat/typescript>, typescript@patch:typescript@^4.9.4#~builtin<compat/typescript>":
   version: 4.9.4
   resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=d73830"
   bin: