https://github.com/patricklx/ember-hbs-imports

adds template imports to hbs files
https://github.com/patricklx/ember-hbs-imports

ember ember-addon

Last synced: 3 months ago
JSON representation

adds template imports to hbs files

• Host: GitHub
• URL: https://github.com/patricklx/ember-hbs-imports
• Owner: patricklx
• License: mit
• Created: 2020-09-14T07:50:05.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-03-04T13:03:17.000Z (10 months ago)
• Last Synced: 2024-09-29T08:04:35.282Z (3 months ago)
• Topics: ember, ember-addon
• Language: JavaScript
• Homepage:
• Size: 872 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
ember-hbs-imports

==============================================================================

This addon allows you to use import-style syntax to create local bindings to

a helper/component and import styles within a template file.

* More concise invocations while making it explicit where it comes from

* No hyphens needed!

* Relative imports!

there is now an official addon for imports at https://github.com/ember-template-imports/ember-template-imports

Installation

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

```

ember install ember-hbs-imports

```

Usage

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

Use the same kind of import syntax you are familiar with from Javascript:

Syntax:

* import "{ named }" from "my-helpers"

* import "{ * as named }" from "my-helpers"

* import a from 'x': will use helper/component from 'x'

* import * as b from 'x': will user helper/component from path 'x/'

* import style from 'x.scoped.scss': import scss and replace content in template 

```hbs

{{import "{ fn }" from "@ember/helper"}}

{{import myHelper from 'ui/helper'}}

{{import my-mod from 'ui/modifiers'}}

{{import style from './styles.module.scss'}}

{{import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'}}

{{import SameDropdown from 'ember-basic-dropdown/components/basic-dropdown'}}

{{import helper as ashelper from "ui/helpers" }}

{{import a as ahelper from "ui/helpers" }}

{{import "* as helpers" from "u/helpersi" }}

{{import "a, b" from "ui/helpers" }}

{{import "a as x, b as y" from "ui/helpers" }}

{{import "a as z, helper" from "ui/helpers" }}

{{myHelper 'a'}}

{{helpers.x 'a'}}



```

The helper is looked up from the given string using a direct lookup

pattern. I set the `resolveHelper` in the resolver. 

All this addon does is taking that `{{import ...}}` statement

and replacing all helper invocations with `{{ember-hbs-import/helpers/invoke-helper 'myHelper' ...}}`.

Our helper then looks up the actual helper and calls `compute` with the other arguments

Embroider Support

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

to also have style imports working you need to add following to the embroider packagerOptions.

this will prefix the styles with a specific hash, which is the same ember-hbs-imports will use in the templates.

```js

const spark_md5 = require('spark-md5');

...

packagerOptions: {

      webpackConfig: {

        module: {

          rules: [

            {

              test: /app\/styles\/app.scss$/i,

              use: [

                { loader: 'style-loader' },

                { loader: 'css-loader', options: {

                    modules: {

                      mode: 'global',

                    }

                  } },

                { loader: 'sass-loader' }

              ],

            },

            {

              test: /\.module\.scss$/i,

              use: [

                { loader: 'style-loader' },

                { loader: 'css-loader', options: {

                    modules: {

                      mode: 'local',

                      getLocalIdent(context, localIdentName, localName) {

                        const name = localName;

                        let namespace = context.resourcePath.split('node_modules').slice(-1)[0];

                        if (namespace.startsWith('@')) {

                          namespace = namespace.split('/').slice(0, 2).join('/');

                        } else {

                          namespace = namespace.split('/')[0];

                        }

                        let relativePath = context.resourcePath;

                        relativePath = relativePath.replace(/\\/g, '/');

                        const prefix = context.context;

                        const hashKey = `${namespace}_${prefix}_${name}`;

                        return `${namespace}_${prefix}_${name}_${spark_md5.hash(hashKey).slice(0, 5)}`;

                      }

                    }

                  } },

                { loader: 'sass-loader' }

              ],

            },

          ],

        },

      }

    }

```

Glint Support

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

* use glint/core tgz from https://github.com/patricklx/glint/releases

* use `ember-hbs-imports` as glint environment, remove ember-loose.

* make sure that there is an import for every values or dont use imports at all

Template Lint Support

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

* add plugin `"ember-hbs-imports/hbs-imports-rule"` to your `.template-lintrc.js`

* enable or disable rule `'must-have-hbs-imports': true`

Motivation

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

[ember-template-component-import](https://github.com/crashco/ember-template-component-import)

already gives us import for components, but I really miss the helper imports.

So I went ahead and added this functionality :)

License

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

This project is licensed under the [MIT License](LICENSE.md).