Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix support for --typescript #80

Merged
merged 6 commits into from
Nov 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .prettierrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,12 @@

module.exports = {
singleQuote: true,
overrides: [
{
files: ['*.js', '*.ts', '*.cjs', '.mjs', '.cts', '.mts', '.cts'],

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.cts is in here twice, and it seems some entries are missing the * character?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ope

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was going to point out that overrides are overriding what is already being set as the default on line 4 so this whole block is pointless (I think) 🙈

this PR had too much back and forth I just let that one slide

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Iteration is easier

Ye

options: {
singleQuote: true,
},
},
],
};
3 changes: 2 additions & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export default [
{
files: [
'files/*/app/**/*.js',
'files-override/**/*.mjs',
'files-override/*/app/**/*.js',
'files-override/*/tests/**/*.js',
],
Expand All @@ -24,6 +25,6 @@ export default [
pluginJs.configs.recommended,
eslintPluginPrettierRecommended,
{
ignores: ['tests/fixture/*'],
ignores: ['tests/fixture/*', 'tests/fixture-ts/*'],
},
];
2 changes: 1 addition & 1 deletion files-override/shared/tests/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

<script type="module">
import { start } from './test-helper';
import.meta.glob("./**/*.{js,gjs,gts}", { eager: true });
import.meta.glob("./**/*.{js,ts,gjs,gts}", { eager: true });
start();
</script>

Expand Down
13 changes: 13 additions & 0 deletions files-override/ts/app/app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Application from '@ember/application';
import compatModules from '@embroider/virtual/compat-modules';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

export default class App extends Application {
modulePrefix = config.modulePrefix;
podModulePrefix = config.podModulePrefix;
Resolver = Resolver.withModules(compatModules);
}

loadInitializers(App, config.modulePrefix, compatModules);
146 changes: 146 additions & 0 deletions files-override/ts/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import globals from 'globals';
import js from '@eslint/js';

import ts from 'typescript-eslint';

import ember from 'eslint-plugin-ember';
import emberRecommended from 'eslint-plugin-ember/configs/recommended';
import gjsRecommended from 'eslint-plugin-ember/configs/recommended-gjs';
import gtsRecommended from 'eslint-plugin-ember/configs/recommended-gts';

import prettier from 'eslint-plugin-prettier/recommended';
import qunit from 'eslint-plugin-qunit';
import n from 'eslint-plugin-n';

import emberParser from 'ember-eslint-parser';
import babelParser from '@babel/eslint-parser';

const parserOptions = {
esm: {
js: {
ecmaFeatures: { modules: true },
ecmaVersion: 'latest',
},
ts: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
};

export default ts.config(
Copy link
Collaborator Author

@NullVoxPopuli NullVoxPopuli Sep 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this utility is neat -- it re-adds some basic support for extends
-- its kind of a less-powerful version of configFor + forFiles

Here is proof this config works:
image

image

js.configs.recommended,
prettier,
{
files: ['**/*.js'],
languageOptions: {
parser: babelParser,
parserOptions: parserOptions.esm.js,
globals: {
...globals.browser,
},
},
plugins: {
ember,
},
rules: {
...emberRecommended.rules,
},
},
{
files: ['**/*.ts'],
plugins: { ember },
languageOptions: {
parserOptions: parserOptions.esm.ts,
},
extends: [...ts.configs.strictTypeChecked, ...emberRecommended],
},
{
files: ['**/*.gjs'],
languageOptions: {
parser: emberParser,
parserOptions: parserOptions.esm.js,
globals: {
...globals.browser,
},
},
plugins: {
ember,
},
rules: {
...emberRecommended.rules,
...gjsRecommended.rules,
},
},
{
files: ['**/*.gts'],
plugins: { ember },
languageOptions: {
parserOptions: parserOptions.esm.ts,
},
extends: [
...ts.configs.strictTypeChecked,
...emberRecommended,
...gtsRecommended,
],
},
{
files: ['tests/**/*-test.{js,gjs}'],
plugins: {
qunit,
},
},
/**
* CJS node files
*/
{
files: [
'**/*.cjs',
'config/**/*.js',
'testem.js',
'testem*.js',
'.prettierrc.js',
'.stylelintrc.js',
'.template-lintrc.js',
'ember-cli-build.js',
],
plugins: {
n,
},

languageOptions: {
sourceType: 'script',
ecmaVersion: 'latest',
globals: {
...globals.node,
},
},
},
/**
* ESM node files
*/
{
files: ['*.mjs'],
plugins: {
n,
},

languageOptions: {
sourceType: 'module',
ecmaVersion: 'latest',
parserOptions: parserOptions.esm.js,
globals: {
...globals.node,
},
},
},
/**
* Settings
*/
{
ignores: ['dist/', 'node_modules/', 'coverage/', '!**/.*'],
linterOptions: {
reportUnusedDisableDirectives: 'error',
},
},
);
14 changes: 14 additions & 0 deletions files-override/ts/tests/test-helper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Application from '<%= name %>/app';
import config from '<%= name %>/config/environment';
import * as QUnit from 'qunit';
import { setApplication } from '@ember/test-helpers';
import { setup } from 'qunit-dom';
import { start as qunitStart } from 'ember-qunit';

export function start() {
setApplication(Application.create(config.APP));

setup(QUnit.assert);

qunitStart();
}
NullVoxPopuli marked this conversation as resolved.
Show resolved Hide resolved
45 changes: 45 additions & 0 deletions files-override/ts/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
{
"extends": "@tsconfig/ember/tsconfig.json",
"include": [
"app", "tests", "types"
],
"glint": {
"environment": [
"ember-loose",
"ember-template-imports"
]
},
"compilerOptions": {
"allowJs": true,
/**
https://www.typescriptlang.org/tsconfig#noEmitOnError
Do not block emit on TS errors.
*/
"noEmitOnError": false,

"declaration": false,
"declarationMap": false,

/**
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,
"paths": {
"<%= name %>/tests/*": [
"./tests/*"
],
"<%= name %>/*": [
"./app/*"
],
"*": [
"./types/*"
]
},
"types": [
"ember-source/types"
]
},
}
1 change: 1 addition & 0 deletions files-override/ts/types/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="@embroider/core/virtual" />
18 changes: 18 additions & 0 deletions files/ts/app/templates/application.gts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Route from 'ember-route-template';
NullVoxPopuli marked this conversation as resolved.
Show resolved Hide resolved
import { pageTitle } from 'ember-page-title';
<% if (welcome) {%>import { WelcomePage } from 'ember-welcome-page';<% } %>

export default Route(
<template>
{{pageTitle "<%= namespace %>"}}
<% if (welcome) { %>
{{outlet}}

{{! The following component displays Ember's default welcome message. }}
<WelcomePage />
{{! Feel free to remove this! }}<% } else { %>
<h2 id="title">Welcome to Ember</h2>

{{outlet}}<% } %>
</template>
);
50 changes: 50 additions & 0 deletions files/ts/babel.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
const {
babelCompatSupport,
templateCompatSupport,
} = require('@embroider/compat/babel');

module.exports = {
plugins: [
[
'@babel/plugin-transform-typescript',
{
allExtensions: true,
onlyRemoveTypeImports: true,
allowDeclareFields: true,
},
],
[
'babel-plugin-ember-template-compilation',
{
compilerPath: 'ember-source/dist/ember-template-compiler.js',
enableLegacyModules: [
'ember-cli-htmlbars',
'ember-cli-htmlbars-inline-precompile',
'htmlbars-inline-precompile',
],
transforms: [...templateCompatSupport()],
},
],
[
'module:decorator-transforms',
{
runtime: {
import: require.resolve('decorator-transforms/runtime-esm'),
},
},
],
[
'@babel/plugin-transform-runtime',
{
absoluteRuntime: __dirname,
useESModules: true,
regenerator: false,
},
],
...babelCompatSupport(),
],

generatorOpts: {
compact: false,
},
};
Loading
Loading