Merge pull request #1014 from mainmatter/typescript

chore(typescript): initial Typescript setup

Author: BobrImperator

packages/ember-cookies/.eslintignore

@@ -2,6 +2,7 @@
 
 # compiled output
 /dist
+/declarations/
 
 # dependencies
 /node_modules

packages/ember-cookies/.gitignore

@@ -1,2 +1,4 @@
+'use strict';
+
 const { addonV1Shim } = require('@embroider/addon-shim');
 module.exports = addonV1Shim(__dirname);

packages/ember-cookies/addon-main.js renamed to packages/ember-cookies/addon-main.cjs

@@ -1,5 +1,9 @@
 {
   "plugins": [
+    [
+      "@babel/plugin-transform-typescript",
+      { "allExtensions": true, "onlyRemoveTypeImports": true }
+    ],
     "@embroider/addon-dev/template-colocation-plugin",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-proposal-class-properties"

packages/ember-cookies/babel.config.json

@@ -1,7 +1,7 @@
 import ember from 'eslint-plugin-ember';
 import prettier from 'eslint-plugin-prettier/recommended';
 import globals from 'globals';
-import babelParser from '@babel/eslint-parser';
+import typescriptParser from '@typescript-eslint/parser';
 import n from 'eslint-plugin-n';
 import js from '@eslint/js';
 
@@ -15,6 +15,7 @@ export default [
       'vendor/',
       'dist/',
       'tmp/',
+      'declarations/',
       'bower_components/',
       'node_modules/',
       'coverage/',
@@ -28,13 +29,14 @@ export default [
     plugins: {
       ember,
     },
+    files: ['**/*.{ts,js}'],
 
     languageOptions: {
       globals: {
         ...globals.browser,
       },
 
-      parser: babelParser,
+      parser: typescriptParser,
       ecmaVersion: 2020,
       sourceType: 'module',
 
@@ -53,7 +55,7 @@ export default [
       '**/.eslintrc.js',
       '**/.eslintrc.js',
       '**/.prettierrc.js',
-      '**/addon-main.js',
+      '**/addon-main.cjs',
       'blueprints/*/index.js',
       'config/**/*.js',
     ],

packages/ember-cookies/eslint.config.mjs

@@ -8,21 +8,20 @@
   "repository": "https://github.com/simplabs/ember-cookies",
   "license": "MIT",
   "author": "",
-  "types": "./index.d.ts",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./declarations/index.d.ts",
       "default": "./dist/index.js"
     },
     "./*": {
-      "types": "./index.d.ts",
-      "default": "./dist/*"
+      "types": "./declarations/*.d.ts",
+      "default": "./dist/*.js"
     },
     "./test-support": {
-      "types": "./index.d.ts",
+      "types": "./declarations/*.d.ts",
       "default": "./dist/test-support/index.js"
     },
-    "./addon-main.js": "./addon-main.js"
+    "./addon-main.js": "./addon-main.cjs"
   },
   "typesVersions": {
     "*": {
@@ -36,16 +35,17 @@
     "test": "tests"
   },
   "files": [
-    "addon-main.js",
-    "dist",
-    "index.d.ts"
+    "addon-main.cjs",
+    "declarations",
+    "dist"
   ],
   "scripts": {
     "build": "rollup --config",
     "copyDoc": "cp ../../*.md .",
-    "lint": "concurrently \"pnpm lint:js\"",
+    "lint": "concurrently \"pnpm lint:js\" \"pnpm lint:types\"",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
+    "lint:types": "glint",
     "prepublishOnly": "concurrently \"pnpm copyDoc\" \"pnpm build\"",
     "start": "rollup --config --watch",
     "test": "echo 'A v2 addon does not have tests, run tests in test-app'",
@@ -56,14 +56,21 @@
   },
   "devDependencies": {
     "@babel/core": "7.25.8",
-    "@babel/eslint-parser": "7.25.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-decorators": "7.25.9",
+    "@babel/plugin-transform-typescript": "^7.26.3",
     "@embroider/addon-dev": "7.1.1",
     "@eslint/eslintrc": "3.1.0",
     "@eslint/js": "9.12.0",
+    "@glint/core": "^1.5.0",
+    "@glint/environment-ember-loose": "^1.5.0",
+    "@glint/environment-ember-template-imports": "^1.5.0",
     "@rollup/plugin-babel": "6.0.4",
+    "@tsconfig/ember": "^3.0.8",
     "@types/ember": "4.0.11",
+    "@types/ember__utils": "^4.0.7",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "concurrently": "9.0.1",
     "eslint": "9.12.0",
     "eslint-config-prettier": "9.1.0",
@@ -72,7 +79,8 @@
     "eslint-plugin-prettier": "5.2.1",
     "globals": "15.11.0",
     "prettier": "3.3.3",
-    "rollup": "4.29.1"
+    "rollup": "4.29.1",
+    "typescript": "^5.7.2"
   },
   "engines": {
     "node": ">= 16.*"
@@ -81,7 +89,7 @@
     "edition": "octane"
   },
   "ember-addon": {
-    "main": "addon-main.js",
+    "main": "addon-main.cjs",
     "type": "addon",
     "version": 2,
     "versionCompatibility": {

packages/ember-cookies/index.d.ts

@@ -15,6 +15,7 @@ export default {
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
     addon.publicEntrypoints([
+      '**/*.js',
       'services/**/*.js',
       'test-support/**/*.js',
       'utils/**/*.js',
@@ -33,6 +34,7 @@ export default {
     // By default, this will load the actual babel config from the file
     // babel.config.json.
     babel({
+      extensions: ['.js', '.ts'],
       babelHelpers: 'bundled',
     }),
 
@@ -44,6 +46,9 @@ export default {
     // Ensure that standalone .hbs files are properly integrated as Javascript.
     addon.hbs(),
 
+    // Emit .d.ts declarations
+    addon.declarations('declarations'),
+
     // addons are allowed to contain imports of .css files, which we want rollup
     // to leave alone and keep in the published output.
     addon.keepAssets(['**/*.css']),

packages/ember-cookies/package.json

@@ -3,7 +3,7 @@ import { get } from '@ember/object';
 import { assert } from '@ember/debug';
 import { getOwner } from '@ember/application';
 import Service from '@ember/service';
-import { serializeCookie } from '../utils/serialize-cookie';
+import { serializeCookie } from '../utils/serialize-cookie.ts';
 const { keys } = Object;
 const DEFAULTS = { raw: false };
 const MAX_COOKIE_BYTE_LENGTH = 4096;

packages/ember-cookies/rollup.config.js renamed to packages/ember-cookies/rollup.config.mjs

@@ -1,6 +1,6 @@
 import { assert } from '@ember/debug';
 import { isEmpty } from '@ember/utils';
-import { serializeCookie } from '../utils/serialize-cookie';
+import { serializeCookie } from '../utils/serialize-cookie.ts';
 
 export default function clearAllCookies(options = {}) {
   assert('Cookies cannot be set to be HTTP-only from a browser!', !options.httpOnly);

packages/ember-cookies/src/services/cookies.js

@@ -1,12 +1,23 @@
 import { typeOf, isEmpty } from '@ember/utils';
 
-export const serializeCookie = (name, value, options = {}) => {
+interface Options {
+  maxAge?: number | string;
+  domain?: string;
+  expires?: Date;
+  secure?: boolean;
+  httpOnly?: boolean;
+  path?: string;
+  sameSite?: string;
+  partitioned?: boolean;
+}
+
+export const serializeCookie = (name: string, value: string, options: Options = {}) => {
   let cookie = `${name}=${value}`;
 
   if (!isEmpty(options.domain)) {
     cookie = `${cookie}; domain=${options.domain}`;
   }
-  if (typeOf(options.expires) === 'date') {
+  if (options.expires && typeOf(options.expires) === 'date') {
     cookie = `${cookie}; expires=${options.expires.toUTCString()}`;
   }
   if (!isEmpty(options.maxAge)) {

packages/ember-cookies/src/test-support/clear-all-cookies.js

@@ -0,0 +1,57 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": [
+    "src/**/*",
+    "unpublished-development-types/**/*"
+  ],
+  "glint": {
+    "environment": ["ember-loose", "ember-template-imports"]
+  },
+  "compilerOptions": {
+    "allowJs": true,
+    "declarationDir": "declarations",
+    /**
+      https://www.typescriptlang.org/tsconfig#noEmit
+
+      We want to emit declarations, so this option must be set to `false`.
+      @tsconfig/ember sets this to `true`, which is incompatible with our need to set `emitDeclarationOnly`.
+      @tsconfig/ember is more optimized for apps, which wouldn't emit anything, only type check.
+    */
+    "noEmit": false,
+    /**
+      https://www.typescriptlang.org/tsconfig#emitDeclarationOnly
+      We want to only emit declarations as we use Rollup to emit JavaScript.
+    */
+    "emitDeclarationOnly": true,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#noEmitOnError
+      Do not block emit on TS errors.
+    */
+    "noEmitOnError": false,
+
+    /**
+      https://www.typescriptlang.org/tsconfig#rootDir
+      "Default: The longest common path of all non-declaration input files."
+
+      Because we want our declarations' structure to match our rollup output,
+      we need this "rootDir" to match the "srcDir" in the rollup.config.mjs.
+
+      This way, we can have simpler `package.json#exports` that matches
+      imports to files on disk
+    */
+    "rootDir": "./src",
+
+    /**
+      https://www.typescriptlang.org/tsconfig#allowImportingTsExtensions
+
+      We want our tooling to know how to resolve our custom files so the appropriate plugins
+      can do the proper transformations on those files.
+    */
+    "allowImportingTsExtensions": true,
+
+    "types": [
+      "ember-source/types"
+    ]
+  }
+}

packages/ember-cookies/src/utils/serialize-cookie.js renamed to packages/ember-cookies/src/utils/serialize-cookie.ts

@@ -0,0 +1 @@
+import '@types/ember__utils';