{"id":15022892,"url":"https://github.com/patricklx/ember-hbs-imports","last_synced_at":"2025-10-24T21:30:21.727Z","repository":{"id":39636094,"uuid":"295343397","full_name":"patricklx/ember-hbs-imports","owner":"patricklx","description":"adds template imports to hbs files","archived":false,"fork":false,"pushed_at":"2024-03-04T13:03:17.000Z","size":893,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-09-29T08:04:35.282Z","etag":null,"topics":["ember","ember-addon"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patricklx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-14T07:50:05.000Z","updated_at":"2023-05-17T04:15:38.000Z","dependencies_parsed_at":"2024-06-21T19:20:51.949Z","dependency_job_id":"dc924471-8098-4575-8a3b-f376942c8425","html_url":"https://github.com/patricklx/ember-hbs-imports","commit_stats":{"total_commits":120,"total_committers":3,"mean_commits":40.0,"dds":"0.44166666666666665","last_synced_commit":"d1c8912a9009ef6be24746679c0aed108cba3a52"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-hbs-imports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-hbs-imports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-hbs-imports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-hbs-imports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patricklx","download_url":"https://codeload.github.com/patricklx/ember-hbs-imports/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867829,"owners_count":16555886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon"],"created_at":"2024-09-24T19:58:29.774Z","updated_at":"2025-10-24T21:30:16.327Z","avatar_url":"https://github.com/patricklx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ember-hbs-imports\n==============================================================================\n\nThis addon allows you to use import-style syntax to create local bindings to\na helper/component and import styles within a template file.\n\n* More concise invocations while making it explicit where it comes from\n* No hyphens needed!\n* Relative imports!\n\n\nthere is now an official addon for imports at https://github.com/ember-template-imports/ember-template-imports\n\nInstallation\n------------------------------------------------------------------------------\n\n```\nember install ember-hbs-imports\n```\n\n\nUsage\n------------------------------------------------------------------------------\n\nUse the same kind of import syntax you are familiar with from Javascript:\n\nSyntax:\n* import \"{ named }\" from \"my-helpers\"\n* import \"{ * as named }\" from \"my-helpers\"\n* import a from 'x': will use helper/component from 'x'\n* import * as b from 'x': will user helper/component from path 'x/\u003cb.*\u003e'\n* import style from 'x.scoped.scss': import scss and replace content in template \n\n```hbs\n{{import \"{ fn }\" from \"@ember/helper\"}}\n{{import myHelper from 'ui/helper'}}\n{{import my-mod from 'ui/modifiers'}}\n{{import style from './styles.module.scss'}}\n{{import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'}}\n{{import SameDropdown from 'ember-basic-dropdown/components/basic-dropdown'}}\n\n\n{{import helper as ashelper from \"ui/helpers\" }}\n{{import a as ahelper from \"ui/helpers\" }}\n{{import \"* as helpers\" from \"u/helpersi\" }}\n{{import \"a, b\" from \"ui/helpers\" }}\n{{import \"a as x, b as y\" from \"ui/helpers\" }}\n{{import \"a as z, helper\" from \"ui/helpers\" }}\n\n\n{{myHelper 'a'}}\n{{helpers.x 'a'}}\n\n\u003cBasicDropdown class={{style.myclass}} /\u003e\n\u003cSameDropdown @param={{style.myclass}} /\u003e\n\n\u003ca {{my-mod}} /\u003e\n```\n\nThe helper is looked up from the given string using a direct lookup\npattern. I set the `resolveHelper` in the resolver. \nAll this addon does is taking that `{{import ...}}` statement\nand replacing all helper invocations with `{{ember-hbs-import/helpers/invoke-helper 'myHelper' ...}}`.\n\nOur helper then looks up the actual helper and calls `compute` with the other arguments\n\n\n\nEmbroider Support\n------------------------------------------------------------------------------\nto also have style imports working you need to add following to the embroider packagerOptions.\nthis will prefix the styles with a specific hash, which is the same ember-hbs-imports will use in the templates.\n```js\nconst spark_md5 = require('spark-md5');\n...\npackagerOptions: {\n      webpackConfig: {\n        module: {\n          rules: [\n            {\n              test: /app\\/styles\\/app.scss$/i,\n              use: [\n                { loader: 'style-loader' },\n                { loader: 'css-loader', options: {\n                    modules: {\n                      mode: 'global',\n                    }\n                  } },\n                { loader: 'sass-loader' }\n              ],\n            },\n            {\n              test: /\\.module\\.scss$/i,\n              use: [\n                { loader: 'style-loader' },\n                { loader: 'css-loader', options: {\n                    modules: {\n                      mode: 'local',\n                      getLocalIdent(context, localIdentName, localName) {\n                        const name = localName;\n                        let namespace = context.resourcePath.split('node_modules').slice(-1)[0];\n                        if (namespace.startsWith('@')) {\n                          namespace = namespace.split('/').slice(0, 2).join('/');\n                        } else {\n                          namespace = namespace.split('/')[0];\n                        }\n                        let relativePath = context.resourcePath;\n                        relativePath = relativePath.replace(/\\\\/g, '/');\n                        const prefix = context.context;\n                        const hashKey = `${namespace}_${prefix}_${name}`;\n                        return `${namespace}_${prefix}_${name}_${spark_md5.hash(hashKey).slice(0, 5)}`;\n                      }\n                    }\n                  } },\n                { loader: 'sass-loader' }\n              ],\n            },\n          ],\n        },\n      }\n    }\n```\n\nGlint Support\n------------------------------------------------------------------------------\n* use glint/core tgz from https://github.com/patricklx/glint/releases\n* use `ember-hbs-imports` as glint environment, remove ember-loose.\n* make sure that there is an import for every values or dont use imports at all\n\nTemplate Lint Support\n------------------------------------------------------------------------------\n* add plugin `\"ember-hbs-imports/hbs-imports-rule\"` to your `.template-lintrc.js`\n* enable or disable rule `'must-have-hbs-imports': true`\n\nMotivation\n------------------------------------------------------------------------------\n\n[ember-template-component-import](https://github.com/crashco/ember-template-component-import)\nalready gives us import for components, but I really miss the helper imports.\nSo I went ahead and added this functionality :)\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatricklx%2Fember-hbs-imports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatricklx%2Fember-hbs-imports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatricklx%2Fember-hbs-imports/lists"}