### Install Dependencies

Source: https://github.com/ember-cli/ember-template-imports/blob/master/CONTRIBUTING.md

Clone the repository and install project dependencies using pnpm.

```bash
git clone <repository-url>
cd ember-template-imports
pnpm install
```

--------------------------------

### Install Glint and Environment

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Install the necessary Glint packages to enable type checking for .gts files. This is required when using TypeScript with Glint.

```bash
npm install --save-dev @glint/core @glint/environment-ember-template-imports
```

--------------------------------

### Example Usage of PreprocessorOptions

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

An example of how to enable inline source maps when adding the TemplateImportPreprocessor to the Ember CLI registry.

```javascript
registry.add('js', new TemplateImportPreprocessor({
  inline_source_map: true
}));
```

--------------------------------

### Example of Adding Babel Plugin

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Shows how to push a Babel plugin configuration, including the plugin path and options, into the babelPlugins array.

```javascript
babelPlugins.push([babelPluginPath, { v: 1, root }]);
```

--------------------------------

### Install ember-template-imports with Yarn

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Installs the ember-template-imports package and the supporting Prettier plugin using Yarn.

```sh
yarn add --dev ember-template-imports prettier-plugin-ember-template-tag
```

--------------------------------

### Install ember-template-imports with npm

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Installs the ember-template-imports package and the supporting Prettier plugin using npm.

```sh
npm add --save-dev ember-template-imports prettier-plugin-ember-template-tag
```

--------------------------------

### Example Input File for Template-Only Component

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/babel-plugin.md

Shows the structure of an input .gjs file containing template-only components before Babel processing.

```gjs
import Component from '@glimmer/component';

export const Greeting = <template>
  Hello, {{@name}}!
</template>

export class GreetingClass extends Component {
  <template>Goodbye!</template>
}
```

--------------------------------

### Example Usage of ContentTagProcessorOptions

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Demonstrates passing options, including filename and inline_source_map, to the content-tag processor during file transformation.

```javascript
this.#processor.process(string, {
  filename: relativePath,
  inline_source_map: this.#inline_source_map
})
```

--------------------------------

### Install ember-template-imports with pnpm

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Installs the ember-template-imports package and the supporting Prettier plugin using pnpm.

```sh
pnpm add --save-dev ember-template-imports prettier-plugin-ember-template-tag
```

--------------------------------

### Define and Use Local Components

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

This example demonstrates defining components that are only used within the same file. The 'Option' component is used internally by 'CustomSelect'.

```gjs
const Option = <template>
  <option selected={{@selected}} value={{@value}}>
    {{or @title @value}}
  </option>
</template>;

export const CustomSelect = <template>
  <select>
    {{#each @options as |opt|}}
      <Option
        @value={{opt.value}}
        @selected={{eq opt @selectedOption}}
      />
    {{/each}}
  </select>
</template>;
```

--------------------------------

### Dependency Hierarchy Example

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/README.md

Illustrates the dependency structure of the ember-template-imports addon, showing the entry point and its direct and indirect dependencies.

```plaintext
ember-addon-main.js (entry point)
├── Version checking (ember-cli-version-checker)
├── Babel plugin registration
│   └── src/babel-plugin.js
└── Preprocessor registration
    └── src/preprocessor-plugin.js
        ├── content-tag (template transformation)
        └── broccoli-stew (tree manipulation)
```

--------------------------------

### Glimmer Component Input (.gjs)

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/README.md

Example of a Glimmer component defined in a .gjs file using the <template> syntax.

```gjs
const Greeting = <template>Hello!</template>
```

--------------------------------

### Example of Adding Preprocessor to Registry

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Illustrates how to add the TemplateImportPreprocessor to the Ember CLI's JavaScript preprocessor registry within the setupPreprocessorRegistry hook.

```javascript
setupPreprocessorRegistry(type, registry) {
  if (type === 'parent') {
    registry.add('js', new TemplateImportPreprocessor(options));
  }
}
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Use this command to install or update the minimum required versions of core Ember dependencies when prompted by version check errors.

```bash
pnpm add --save-dev ember-source@^3.27.0 ember-cli-htmlbars@^6.3.0 ember-cli-babel@^8.2.0
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Use this command to install or update the minimum required versions of core Ember dependencies when prompted by version check errors.

```bash
npm install --save-dev ember-source@^3.27.0 ember-cli-htmlbars@^6.3.0 ember-cli-babel@^8.2.0
```

--------------------------------

### Verifying Addon Installation

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Check if 'ember-template-imports' is installed and listed in your devDependencies. If not, install it and reinstall dependencies.

```bash
npm list ember-template-imports
```

```bash
npm install --save-dev ember-template-imports
```

```bash
rm -rf node_modules package-lock.json
npm install
```

--------------------------------

### Install Dependencies with yarn

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Use this command to install or update the minimum required versions of core Ember dependencies when prompted by version check errors.

```bash
yarn add --dev ember-source@^3.27.0 ember-cli-htmlbars@^6.3.0 ember-cli-babel@^8.2.0
```

--------------------------------

### Accessing Configuration in Application

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

Share build-time configuration with your application by defining it in `config/environment.js` and accessing it via the imported `config` object. This example sets `debugSourceMaps` based on the environment.

```javascript
// config/environment.js
module.exports = function (environment) {
  let ENV = {
    APP: {
      // Application configuration
    }
  };

  if (environment === 'development') {
    ENV.APP.debugSourceMaps = true;
  }

  if (environment === 'production') {
    ENV.APP.debugSourceMaps = false;
  }

  return ENV;
};
```

```javascript
import config from 'my-app/config/environment';

if (config.APP.debugSourceMaps) {
  console.log('Source maps enabled');
}
```

--------------------------------

### Install ember-template-imports

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

Install the `ember-template-imports` addon as a development dependency using npm, pnpm, or yarn. This is necessary if the addon is not already listed in your `package.json` dependencies.

```bash
npm install --save-dev ember-template-imports
```

```bash
pnpm add --save-dev ember-template-imports
```

```bash
yarn add --dev ember-template-imports
```

--------------------------------

### Importing a Component using hbs (Historical)

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

This is a historical example demonstrating how components were imported using the `hbs` helper before the adoption of the `<template>` syntax. This method is no longer supported in recent versions.

```gjs
import { hbs } from 'ember-template-imports';
import MyComponent from './my-component';

export default hbs`
  <MyComponent/>
`;
```

--------------------------------

### Glimmer Component Input File (.gjs)

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/preprocessor-plugin.md

An example of a Glimmer component written using the .gjs syntax, including component class definition, state, methods, and a template block.

```gjs
import Component from '@glimmer/component';
import { on } from '@ember/modifier';

export default class Greeting extends Component {
  count = 0;

  increment = () => {
    this.count += 1;
  };

  <template>
    <button {{on "click" this.increment}}>
      Count: {{this.count}}
    </button>
  </template>
}
```

--------------------------------

### GJS Component Example

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Demonstrates a basic GJS component with imported modifiers and child components, using the <template> tag for embedded templates.

```gjs
import { on } from '@ember/modifier';
import FancyButton from './fancy-button';

function greet() {
  alert("AHOY!")
}

<template>
  <p>Hello, {{@name}}!</p>
  <FancyButton @label="Say hello!" {{on "click" greet}} />
</template>
```

--------------------------------

### Install Prettier Plugin for Ember Template Tags

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Install the prettier-plugin-ember-template-tag to ensure proper formatting of template tags with Prettier. This is a common step when configuring linters for Glimmer projects.

```bash
npm install --save-dev prettier-plugin-ember-template-tag
```

--------------------------------

### AST VariableDeclarator Example

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Handles variable declaration with initialization in the Babel plugin. This example demonstrates extracting the declared variable name.

```javascript
const myVar = <template>...</template>
```

```javascript
{
  type: 'VariableDeclarator',
  id: { type: 'Identifier', name: 'myVar' },
  init: { /* expression */ }
}
```

```javascript
if (assignment.type === 'VariableDeclarator' && 
    assignment.id.type === 'Identifier') {
  assignmentName = t.stringLiteral(rootName + ':' + assignment.id.name);
}
```

--------------------------------

### Babel AST Node Access

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Provides examples of accessing AST nodes and their properties, including function arguments and parent assignment details.

```js
path.node.arguments                     // Function arguments
path.node.arguments[0]                  // First argument

// Accessing parent assignment
let assignment = path.parentPath.parentPath.node;
assignment.type                         // Node type
assignment.left                         // Left side of assignment
assignment.id                           // Variable identifier
```

--------------------------------

### Get Babel Options Helper Method

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/addon-main.md

The internal '_getBabelOptions' method retrieves Babel configuration options from the parent addon or application, preparing the plugins array for modification.

```javascript
{
  plugins: [/* existing babel plugins */]
}
```

--------------------------------

### Configure Glint for TypeScript

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

Install Glint core and the Ember template imports environment for TypeScript support. Configure your `tsconfig.json` to include the Glint plugin.

```bash
npm install --save-dev @glint/core @glint/environment-ember-template-imports
```

```json
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "@glint/environment-ember-template-imports"
      }
    ]
  }
}
```

--------------------------------

### Valid Glimmer Template Patterns

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

These examples illustrate correct syntax for using <template> tags within Glimmer components in .gjs/.gts files. Ensure your templates follow these valid patterns.

```gjs
// ✓ Valid: variable assignment
const Greeting = <template>Hello</template>

// ✓ Valid: named export
export const Button = <template>Click me</template>

// ✓ Valid: default export
export default <template>Content</template>

// ✓ Valid: class method
class MyComponent {
  <template>{{this.text}}</template>
}

// ✗ Invalid: template at top level without assignment
<template>Content</template>  // (OK in test files only)

// ✗ Invalid: unclosed tag
const C = <template>content
```

--------------------------------

### Setup Preprocessor Registry Hook - Ember Addon

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/addon-main.md

The 'setupPreprocessorRegistry' hook registers the TemplateImportPreprocessor for .gjs and .gts files when the type is 'parent'. It's automatically called by Ember CLI.

```javascript
// Internal addon hook - automatically called by Ember CLI
// Registers the template import preprocessor with:
// registry.add('js', new TemplateImportPreprocessor(options))
```

--------------------------------

### Template-Only Component

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/INDEX.md

Example of a template-only component using the <template> tag in a .gjs file. This component is defined solely by its template.

```gjs
// Template-only component
const Button = <template>
  <button>Click me</button>
</template>
```

--------------------------------

### Default Configuration (Source Maps Enabled)

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

This example shows the default configuration where no specific settings are provided for 'ember-template-imports', resulting in inline source maps being enabled by default.

```javascript
// ember-cli-build.js
const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {
    // No configuration needed - uses defaults
  });

  return app.toTree();
};
```

--------------------------------

### AST ExportDefaultDeclaration Example

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Handles default export statements in the Babel plugin. This snippet shows how to identify a default export and extract a root name.

```javascript
export default <template>...</template>
```

```javascript
{
  type: 'ExportDefaultDeclaration',
  declaration: { /* expression */ }
}
```

```javascript
if (assignment.type === 'ExportDefaultDeclaration') {
  assignmentName = t.stringLiteral(rootName);
}
```

--------------------------------

### Class-Based Component with Template

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/INDEX.md

Example of a class-based component in a .gjs file that includes its template within the class definition using the <template> tag.

```gjs
// Class-based component
class Form extends Component {
  <template>
    <form><!-- form content --></form>
  </template>
}
```

--------------------------------

### Check Ember Version

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Validates that the installed ember-source version meets the minimum requirement for the addon. Throws an error listing all unmet version requirements.

```javascript
let errors = [];

if (!emberChecker.gte('3.27.0')) {
  errors.push('ember-source 3.27.0 or higher');
}

if (errors.length > 0) {
  throw new Error('ember-template-imports requires\n\t' + errors.join('\n\t'));
}
```

--------------------------------

### Get Addon Options Helper Method

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/addon-main.md

The '_getAddonOptions' method retrieves and merges addon-specific options, applying defaults like 'inline_source_map: true' and allowing user overrides from ember-cli-build.js.

```javascript
// From ember-cli-build.js:
let app = new EmberAddon(defaults, {
  'ember-template-imports': {
    inline_source_map: false  // override default
  }
});
```

--------------------------------

### Example Error Context for Template Syntax

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

This error message indicates a parsing issue within a <template> tag in a .gjs or .gts file. Review the specified file and line number for syntax errors.

```text
Error: Failed to preprocess "app/components/button.gjs"
  Parse error at line 5: Unexpected token
  Content: const Button = <template>
                                    ↑
```

--------------------------------

### Environment-Specific Configuration

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

Apply different configurations based on the environment by using conditional logic in `ember-cli-build.js`. This example disables source maps in production builds.

```javascript
module.exports = function (defaults) {
  const isProduction = process.env.EMBER_ENV === 'production';
  
  let app = new EmberAddon(defaults, {
    'ember-template-imports': {
      // Disable source maps in production builds for smaller bundles
      inline_source_map: !isProduction
    }
  });

  return app.toTree();
};
```

--------------------------------

### Configure Prettier Plugin

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

Install and configure the `prettier-plugin-ember-template-tag` to enable Prettier support for `.gjs` and `.gts` files. Add the plugin to your `.prettierrc.js` and specify the `glimmer` parser for these file types.

```bash
npm install --save-dev prettier-plugin-ember-template-tag
```

```javascript
module.exports = {
  plugins: ['prettier-plugin-ember-template-tag'],
  overrides: [
    {
      files: ['*.gjs', '*.gts'],
      options: {
        parser: 'glimmer'
      }
    }
  ]
};
```

--------------------------------

### Babel Visitor Path Methods

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Utilize Babel's NodePath methods within visitors to traverse and inspect the Abstract Syntax Tree (AST). This example checks for imports from '@ember/component/template-only'.

```javascript
path.get(key)           // Get child path
path.isIdentifier()     // Check node type
path.referencesImport() // Check import source
path.node              // Access underlying AST node
path.parentPath        // Access parent node path
```

```javascript
let calleePath = path.get('callee');
if (calleePath.isIdentifier()) {
  if (calleePath.referencesImport('@ember/component/template-only', 'default')) {
    // Process templateOnly() call
  }
}
```

--------------------------------

### Update ESLint Plugins for GlimmerJS/GlimmerTS Support

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Install or update ESLint plugins to add support for .gjs and .gts file extensions. This resolves parsing errors when ESLint encounters these Glimmer-specific file types.

```bash
npm install --save-dev eslint-plugin-ember@^11.6.0
```

```bash
npm install --save-dev ember-template-lint@^5.8.0
```

--------------------------------

### Build Project

Source: https://github.com/ember-cli/ember-template-imports/blob/master/CONTRIBUTING.md

Build the project using the pnpm build command.

```bash
pnpm build
```

--------------------------------

### TemplateImportPreprocessor Constructor with Options

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/preprocessor-plugin.md

Initializes a new preprocessor instance. Use this to enable inline source map generation.

```javascript
const preprocessor = new TemplateImportPreprocessor({
  inline_source_map: true
});
```

--------------------------------

### Processing Each File with Preprocessor

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Illustrates how the Preprocessor's process method is used to transform file content, including filename and source map options.

```js
// In toTree() method
let { code: transformed } = this.#processor.process(string, {
  filename: relativePath,
  inline_source_map: this.#inline_source_map
});
```

--------------------------------

### Preprocessor Initialization

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Shows the initialization of the Preprocessor instance within the TemplateImportPreprocessor constructor.

```js
// In TemplateImportPreprocessor constructor
this.#processor = new Preprocessor();
```

--------------------------------

### Preprocessor Registration: setupPreprocessorRegistry() Hook

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

The setupPreprocessorRegistry() hook registers the TemplateImportPreprocessor for the 'js' file type. This preprocessor handles files with .js, .ts, .gjs, and .gts extensions.

```javascript
registry.add('js', new TemplateImportPreprocessor(addonOptions));
```

```javascript
{
  inline_source_map: true  // default from v4.3.0
}
```

--------------------------------

### Output After Preprocessing and Babel Plugin

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/babel-plugin.md

Illustrates the transformed .js code after preprocessing and the Babel plugin, showing the injected component names for debugging.

```javascript
import { setComponentTemplate } from "@ember/component";
import { createTemplateFactory } from "@ember/template-factory";
import templateOnly from "@ember/component/template-only";

export const Greeting = setComponentTemplate(
  createTemplateFactory({...}),
  templateOnly(undefined, 'greeting:Greeting')
);

export class GreetingClass extends Component {
  // ... template attachment
}
```

--------------------------------

### Babel Plugin Path Resolution

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

Demonstrates how the absolute filesystem path to the addon's Babel plugin file is resolved using require.resolve.

```javascript
let babelPluginPath = require.resolve('./src/babel-plugin.js');
```

--------------------------------

### Measure Build Time with npm run build

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

Use the `time` command with `npm run build` to measure the total build duration.

```bash
time npm run build
```

--------------------------------

### Export Multiple Components with Named Exports

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Illustrates how to define and export multiple components using named exports. This allows for components to be imported by their specific names.

```gjs
export const First = <template>First</template>;

export const Second = <template>Second</template>;

export const Third = <template>Third</template>;
```

--------------------------------

### TemplateImportPreprocessor toTree Method

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/preprocessor-plugin.md

The main entry point for Ember CLI's preprocessor registry. It processes .gjs and .gts files, transforms them using content-tag, and renames the output files.

```javascript
// Internal Ember preprocessor hook
// Automatically called by the build system
// Not directly invoked in application code
```

--------------------------------

### Check Incremental Build Performance

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

Trigger an incremental build by touching a file and then running `npm run build` to observe rebuild times.

```bash
touch app/components/test.gjs && npm run build
```

--------------------------------

### AST AssignmentExpression Example

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Handles variable reassignment or property assignment within the Babel plugin. This snippet shows how to extract the assigned variable name.

```javascript
myVar = <template>...</template>
```

```javascript
{
  type: 'AssignmentExpression',
  left: { type: 'Identifier', name: 'myVar' },
  right: { /* expression */ }
}
```

```javascript
if (assignment.type === 'AssignmentExpression' && 
    assignment.left.type === 'Identifier') {
  assignmentName = t.stringLiteral(rootName + ':' + assignment.left.name);
}
```

--------------------------------

### Configure Ember Addon in ember-cli-build.js

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/module-overview.md

Example of how a consumer configures the 'ember-template-imports' addon within their own ember-cli-build.js file. This snippet shows setting the 'inline_source_map' option.

```javascript
// In consumer's ember-cli-build.js:
let app = new EmberAddon(defaults, {
  'ember-template-imports': {
    inline_source_map: true
  }
});
```

--------------------------------

### Example Error Messages for Version Checks

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

These messages indicate that one or more dependencies are below the minimum version required by ember-template-imports. Ensure your project's dependencies meet these requirements.

```text
ember-template-imports requires
	ember-source 3.27.0 or higher
```

```text
ember-template-imports requires
	ember-source 3.27.0 or higher
	ember-cli-htmlbars 6.3.0 or higher
	ember-cli-babel 8.2.0 or higher
```

--------------------------------

### Named Exported Template Component

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/INDEX.md

Example of a named export for a component defined using the <template> tag in a .gjs file. This allows the component to be imported and used elsewhere.

```gjs
// Named export
export const Modal = <template>
  <div class="modal"><!-- modal --></div>
</template>
```

--------------------------------

### Glimmer Component with Embedded Template

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/INDEX.md

Example of a Glimmer component written using the .gjs format, featuring an embedded template. This demonstrates the core syntax that ember-template-imports processes.

```javascript
import Component from '@glimmer/component';

export default class Greeting extends Component {
  <template>
    Hello, {{@name}}!
  </template>
}
```

--------------------------------

### Neovim ESLint Configuration for GJS/GTS

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Configures ESLint within Neovim to activate for javascript.glimmer and typescript.glimmer file types and enables fix-on-save.

```lua
local lsp = require('lspconfig')
  
-- ✂️ 

local eslint = lsp['eslint']
  
eslint.setup({
  filetypes = { 
    "javascript", "typescript", 
    "typescript.glimmer", "javascript.glimmer", 
    "json", 
    "markdown" 
  },
  on_attach = function(client, bufnr) 
    vim.api.nvim_create_autocmd("BufWritePre", {
      buffer = bufnr,
      command = "EslintFixAll",
    })
  end,
})
```

--------------------------------

### Babel Plugin Visitor Logic

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Demonstrates the Babel plugin's visitor pattern for identifying and processing templateOnly() calls within the AST.

```javascript
// In CallExpression visitor
visitor: {
  CallExpression(path, state) {
    let calleePath = path.get('callee');
    
    if (!calleePath.isIdentifier()) return;
    
    // Check if this is a templateOnly() call
    if (calleePath.referencesImport('@ember/component/template-only', 'default')) {
      // This is a templateOnly() call - process it
      
      let filename = state.filename; // '/path/my-app/app/components/greeting.js'
      let rootName = 'greeting'; // Extracted from path
      
      // Determine what was assigned
      let assignment = path.parentPath.parentPath.node;
      
      // For this example, assignment.type would be:
      // ExportDefaultDeclaration (because of export default)
      
      if (assignment.type === 'ExportDefaultDeclaration') {
        assignmentName = t.stringLiteral('greeting');
      }
      
      // Modify parameters
      params.length = 0;
      params.push(t.identifier('undefined'), assignmentName);
    }
  }
}
```

--------------------------------

### Registering the TemplateImportPreprocessor

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/preprocessor-plugin.md

Shows how the addon's main module registers the TemplateImportPreprocessor with the Ember build registry during the setupPreprocessorRegistry hook.

```javascript
// From ember-addon-main.js
setupPreprocessorRegistry(type, registry) {
  if (type === 'parent') {
    registry.add('js', new TemplateImportPreprocessor(this._getAddonOptions()));
  }
}
```

--------------------------------

### Explicitly Enable Inline Source Maps

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/configuration.md

This example demonstrates how to explicitly enable inline source maps by setting `inline_source_map: true` in `ember-cli-build.js`. This is the default behavior in recent versions.

```javascript
// ember-cli-build.js
const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {
    babel: {
      // ... other Babel config
    },
    'ember-template-imports': {
      inline_source_map: true  // explicitly enable (default)
    }
  });

  return app.toTree();
};
```

--------------------------------

### Configuration Flow Diagram

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Illustrates how configuration settings, specifically 'inline_source_map', are passed from ember-cli-build.js through the addon's internal methods to the TemplateImportPreprocessor.

```text
ember-cli-build.js configuration
    ↓
{
  'ember-template-imports': {
    inline_source_map: true
  }
}
    ↓
addon._getAddonOptions()
    ↓
Merges with defaults: { inline_source_map: true }
    ↓
Passed to TemplateImportPreprocessor constructor
    ↓
Stored in #inline_source_map field
    ↓
Used in toTree(): processor.process(string, {
  filename: relativePath,
  inline_source_map: this.#inline_source_map  // ← Used here
})
    ↓
Passed to content-tag Preprocessor
```

--------------------------------

### Ember Template Imports Directory Structure

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/INDEX.md

Illustrates the file organization within the ember-template-imports project, highlighting the purpose of each key file and directory.

```bash
/workspace/home/output/
├── README.md                          ← Project overview
├── INDEX.md                           ← This file
├── types.md                           ← Type definitions
├── configuration.md                   ← Config options
├── errors.md                          ← Error reference
└── api-reference/
    ├── README.md                      ← API reference overview
    ├── module-overview.md             ← Module structure
    ├── addon-main.md                  ← Addon initialization
    ├── babel-plugin.md                ← Babel plugin details
    ├── preprocessor-plugin.md         ← Preprocessor details
    ├── build-integration.md           ← Build pipeline
    └── implementation-guide.md        ← Transformation walkthrough
```

--------------------------------

### Use a Template-Only Component

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Demonstrates how to import and use a previously defined template-only component within another component. Ensure the component is imported before use.

```gjs
// components/hello-world.gjs
import Hello from './hello';

<template>
  <Hello @name="world" />
</template>
```

--------------------------------

### Babel Plugin Configuration Options

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Configure the Babel plugin with version and project root path. The 'v' property is a version marker, and 'root' is used for filename normalization.

```javascript
{
  v: number,
  root: string
}
```

```javascript
babelPlugins.push([babelPluginPath, { v: 1, root: '/path/to/project' }]);
```

--------------------------------

### Plugin Configuration

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/babel-plugin.md

Specifies the configuration options for the Babel plugin, including version and project root.

```javascript
[babelPluginPath, { v: 1, root: '/path/to/project' }]
```

--------------------------------

### Ember Template Imports Transformation Pipeline

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/INDEX.md

Visualizes the build-time transformation process for .gjs/.gts files, showing the stages from source files to final Ember compilation.

```text
.gjs/.gts source files
    ↓
[Preprocessor] - transform <template> syntax
    ├── Uses content-tag library
    └── Outputs: .js/.ts files with template calls
    ↓
[Babel Plugin] - inject component names
    ├── Modifies templateOnly() calls
    └── Outputs: Same code with names added
    ↓
[Ember Compilation] - final template compilation
    └── Uses ember-cli-htmlbars
```

--------------------------------

### Broccoli-Stew Tree Mapping

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Demonstrates how Broccoli-Stew's map function is used to apply transformations to files matching a glob pattern.

```js
let compiled = stew.map(tree, `**/*.{gjs,gts}`, (string, relativePath) => {
  // string: file content
  // relativePath: relative path from tree root
  // returns: transformed content
  return transformed;
});
```

--------------------------------

### Complete Data Flow Summary

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Provides a high-level overview of the entire data processing pipeline, from the initial source code (.gjs/.gts files) through various transformation stages including Babel processing, to the final Ember CLI template compilation.

```text
Source Code (.gjs/.gts)
    ↓
TemplateImportPreprocessor.toTree()
    ├── Read file content
    ├── Call Preprocessor.process()
    ├── Return transformed code
    └── Rename file extension
    ↓
Transformed Code (.js/.ts)
    ├── Now valid JavaScript/TypeScript
    ├── Contains createTemplateFactory() calls
    ├── Contains templateOnly() calls
    └── With source maps (optional)
    ↓
Babel Processing Pipeline
    ├── Load all Babel plugins
    ├── Run babel-plugin.js visitor
    │   └── Find and modify templateOnly() calls
    └── Return modified AST
    ↓
Final Code
    ├── Same createTemplateFactory() calls
    ├── templateOnly() calls now with display names
    └── Ready for Ember compilation
    ↓
Ember CLI Template Compilation
    ├── ember-cli-htmlbars processes
    ├── Glimmer templates compiled
    └── Final component output
```

--------------------------------

### Standard Babel Plugin Structure

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/module-overview.md

Demonstrates the standard interface for a Babel plugin. It includes the plugin name and a visitor object that defines how to traverse and modify the Abstract Syntax Tree (AST).

```javascript
module.exports = function(babel) {
  const { types: t } = babel;
  return {
    name: string,
    visitor: { [NodeType]: function(path, state) {} }
  };
}
```

--------------------------------

### Resolving File Not Found Errors

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Check for missing files referenced during the build process, verify file permissions, and ensure no recent file moves have occurred.

```bash
git status
```

```bash
rm -rf dist/ tmp/

```

--------------------------------

### Input Component (.gjs)

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

The initial state of a component written in .gjs format, including scriptlets and a template block.

```gjs
import Component from '@glimmer/component';
import { on } from '@ember/modifier';

export default class Greeting extends Component {
  @tracked count = 0;

  increment = () => {
    this.count += 1;
  };

  <template>
    <button {{on "click" this.increment}}>
      Count: {{this.count}}
    </button>
  </template>
}
```

--------------------------------

### PreprocessorOptions Configuration

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Configure the preprocessor with options like inline source maps. This object is passed to the TemplateImportPreprocessor constructor.

```javascript
{
  inline_source_map?: boolean
}
```

--------------------------------

### Babel Path Object Methods

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Lists common methods available on a Babel Path object for navigating and inspecting the Abstract Syntax Tree (AST).

```js
path.get(key)                           // Get child path
path.isIdentifier()                     // Check if node is Identifier
path.referencesImport(src, name)        // Check import origin
path.node                               // Access AST node
path.parentPath                         // Access parent path
path.parentPath.parentPath              // Access grandparent (assignment)
```

--------------------------------

### Embroider Build System Integration

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

Shows how to integrate ember-template-imports with the Embroider build system in `ember-cli-build.js`. It uses `maybeEmbroider` to wrap the EmberAddon instance.

```javascript
// ember-cli-build.js
const { maybeEmbroider } = require('@embroider/test-setup');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {
    'ember-template-imports': { /* options */ }
  });

  return maybeEmbroider(app);
};
```

--------------------------------

### Import Node.js Path Utilities

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/module-overview.md

Imports the basename and extname functions from Node.js's built-in 'path' module. These are used for extracting filename and extension components, typically for generating display names.

```javascript
const { basename, extname } = require('path');
```

--------------------------------

### Babel Plugin Registration Format

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

This code shows the format for registering the addon's Babel plugin. It includes the plugin path and configuration options like version marker and project root.

```javascript
babelPlugins.push([
  babelPluginPath,  // String path to babel-plugin.js
  {
    v: 1,          // Plugin version marker
    root: rootPath  // Project root directory
  }
]);
```

--------------------------------

### Define Helpers and Modifiers within a Component File

Source: https://github.com/ember-cli/ember-template-imports/blob/master/README.md

Shows how to define and use custom helpers and modifiers directly within the same .gjs file as the component. This promotes co-location of related logic.

```gjs
import { modifier } from 'ember-modifier';

const plusOne = (num) => num + 1;

const setScrollPosition = modifier((element, [position]) => {
  element.scrollTop = position
});

<template>
  <div class="scroll-container" {{setScrollPosition @scrollPos}}>
    {{#each @items as |item index|}}
      Item #{{plusOne index}}: {{item}}
    {{/each}}
  </div>
</template>
```

--------------------------------

### Preprocessor Plugin Input Processing

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Illustrates how the preprocessor plugin processes the .gjs file content to transform template syntax.

```javascript
// In toTree() method
let compiled = stew.map(tree, "**/*.{gjs,gts}", (string, relativePath) => {
  // string = full file content above
  // relativePath = 'app/components/greeting.gjs'
  
  let { code: transformed } = this.#processor.process(string, {
    filename: 'app/components/greeting.gjs',
    inline_source_map: true
  });
  
  return transformed;
});
```

--------------------------------

### Addon Configuration Object

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/module-overview.md

The main entry point for the Ember CLI addon. It exports a plain object that implements the Ember addon interface, including initialization hooks and methods for registering Babel plugins and preprocessors.

```javascript
module.exports = { ... }  // Addon configuration object
```

--------------------------------

### Broccoli Tree Mapping and Renaming

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

This snippet demonstrates Broccoli tree operations for file transformation. It uses `stew.map` to apply a transformation to matching files and `stew.rename` to change file extensions.

```javascript
// Map transformation over matched files
let compiled = stew.map(tree, `**/*.{gjs,gts}`, (content, path) => {
  return transformed;
});

// Rename files in the output tree
return stew.rename(compiled, (name) => {
  return name.replace(/\.gjs$/, '.js').replace(/\.gts$/, '.ts');
});
```

--------------------------------

### Babel Plugin: Remove Project Root

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Illustrates the first step in the Babel plugin's filename processing, which involves removing the project root path from the file path.

```js
let filename = state.filename;
// '/Users/dev/my-app/app/components/greeting.gjs'

filename = filename.replace(state.opts.root, '');
// 'app/components/greeting.gjs' or '/app/components/greeting.gjs'
```

--------------------------------

### Default Export Preprocessing

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Shows the transformation of a default export with a template from .gjs syntax to JavaScript with setComponentTemplate.

```gjs
export default <template>Welcome</template>
```

```js
export default setComponentTemplate(
  createTemplateFactory({...}),
  templateOnly()
);
```

--------------------------------

### Template-Only Component After Preprocessing

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Illustrates the JavaScript output of a template-only component after the initial preprocessing step, prior to Babel plugin injection of the component name.

```js
import {
  setComponentTemplate
} from "@ember/component";
import {
  createTemplateFactory
} from "@ember/template-factory";
import templateOnly from "@ember/component/template-only";

const Simple = setComponentTemplate(
  createTemplateFactory({
    id: "ABC123",
    block: "[[[1,"div"],[[[1,"Simple component"]]],null]",
    moduleName: "my-app/components/simple.js",
    isStrictMode: true
  }),
  templateOnly() // ← No name yet
);
```

--------------------------------

### Version Checker Usage

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Demonstrates how to use ember-cli-version-checker to check if a specific Ember version is met or exceeded.

```js
let emberChecker = new VersionChecker(this.project).for('ember-source');
let result = emberChecker.gte('3.27.0');  // returns boolean
```

--------------------------------

### Cleaning Build Cache

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Remove stale build artifacts by deleting the 'dist/' directory and running a clean build.

```bash
rm -rf dist/
npm run build
```

--------------------------------

### Babel Plugin: Normalize Path Separators

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Shows the step in the Babel plugin's filename processing where Windows-style backslashes are normalized to forward slashes for consistent path handling.

```js
filename = filename.replace(/\\/g, '/');
// 'app/components/greeting.gjs' (Windows paths normalized)
```

--------------------------------

### Output After Preprocessing (.js)

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

The JavaScript output after the preprocessor plugin has transformed the .gjs file. It includes setComponentTemplate and createTemplateFactory calls.

```javascript
import { setComponentTemplate } from "@ember/component";
import { createTemplateFactory } from "@ember/template-factory";
import Component from '@glimmer/component';
import { on } from '@ember/modifier';

export default class Greeting extends Component {
  @tracked count = 0;

  increment = () => {
    this.count += 1;
  };
}

setComponentTemplate(
  createTemplateFactory({
    id: "g+fScEK3",
    block: "[[[10,\"button\"],[[\"on\"],\"click\",[1,[27,\"this\",\"increment\"]],null],[[[1,[27,\"this\",\"count\"]]]],null]",
    moduleName: "my-app/components/greeting.js",
    isStrictMode: true
  }),
  Greeting
);
```

--------------------------------

### Configure .eslintrc.js for GlimmerJS/GlimmerTS

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/errors.md

Configure your ESLint settings to include support for GlimmerJS and GlimmerTS files. This involves specifying the parser and plugins, especially for .gjs and .gts files.

```js
module.exports = {
  root: true,
  parser: '@babel/eslint-parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    requireConfigFile: false
  },
  plugins: ['ember'],
  extends: ['plugin:ember/recommended'],
  overrides: [
    {
      files: ['**/*.gjs', '**/*.gts'],
      parser: '@babel/eslint-parser',
      plugins: ['ember']
    }
  ]
};
```

--------------------------------

### Content-Tag Processing Logic

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/preprocessor-plugin.md

Demonstrates how the preprocessor uses the content-tag library to transform template tag syntax within a file. The filename and source map options are passed to the process method.

```javascript
let { code: transformed } = this.#processor.process(string, {
  filename: relativePath,
  inline_source_map: this.#inline_source_map
});
```

--------------------------------

### Content Transformation in Preprocessor

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/build-integration.md

This snippet shows the core content transformation logic within the preprocessor stage. It processes the file content using a processor instance, passing the relative path and source map option.

```javascript
let { code: transformed } = this.#processor.process(fileContent, {
    filename: relativePath,
    inline_source_map: this.#inline_source_map
  });
```

--------------------------------

### Babel Plugin Detection for Default Export

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Illustrates how a Babel plugin detects a default export declaration and extracts the root name for template compilation.

```js
assignment.type === 'ExportDefaultDeclaration'

assignmentName = t.stringLiteral('components') // root name only
```

--------------------------------

### File Extension Pattern for Glimmer Files

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

A glob pattern used to match GlimmerJS (.gjs) and GlimmerTS (.gts) files for preprocessor processing.

```regex
**/*.{gjs,gts}
```

--------------------------------

### Broccoli-Stew Tree Renaming

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Shows how to rename files within a Broccoli tree using stew.rename, specifically changing .gjs to .js and .gts to .ts extensions.

```js
return stew.rename(compiled, (name) => {
  return name.replace(/\.gjs$/, '.js').replace(/\.gts$/, '.ts');
});
```

--------------------------------

### Run Ember Tests

Source: https://github.com/ember-cli/ember-template-imports/blob/master/CONTRIBUTING.md

Execute Ember tests using the pnpm test:ember command.

```bash
pnpm test:ember
```

--------------------------------

### Template-Only Component Preprocessing

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/api-reference/implementation-guide.md

Shows the transformation of a template-only component from its GJS input to JavaScript after preprocessing, before Babel plugin application.

```gjs
const Simple = <template>
  <div>Simple component</div>
</template>
```

--------------------------------

### Ember CLI PreprocessorRegistry Method

Source: https://github.com/ember-cli/ember-template-imports/blob/master/_autodocs/types.md

Shows the signature for adding a preprocessor to the Ember CLI registry. The 'js' type is used for this addon.

```javascript
registry.add(type: string, preprocessor: Preprocessor): void
```