support embroider static

Author: patricklx

README.md

@@ -35,7 +35,7 @@ Syntax:
 {{import "{ fn }" from "@ember/helper"}}
 {{import myHelper from 'ui/helper'}}
 {{import my-mod from 'ui/modifiers'}}
-{{import style from './styles.scoped.scss'}}
+{{import style from './styles.module.scss'}}
 {{import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown'}}
 {{import SameDropdown from 'ember-basic-dropdown/components/basic-dropdown'}}
 
@@ -90,7 +90,7 @@ packagerOptions: {
               ],
             },
             {
-              test: /\.scoped\.scss$/i,
+              test: /\.module\.scss$/i,
               use: [
                 { loader: 'style-loader' },
                 { loader: 'css-loader', options: {

addon.js

@@ -48,7 +48,7 @@ module.exports = {
     const appOptions = this.app && this.app.options;
     const addonOptions = parentOptions || appOptions || {};
 
-    return addonOptions['ember-template-imports'] || {
+    return addonOptions['ember-hbs-imports'] || {
       style: {
         extension: 'scss',
         plugins: {
@@ -91,14 +91,17 @@ module.exports = {
     const VersionChecker = require('ember-cli-version-checker');
     const checker = new VersionChecker(this);
     const ember = checker.for('ember-source');
+    const addonOptions = this._getAddonOptions();
     const options = {
-      styleExtension: this._getAddonOptions().style.extension,
+      styleExtension: addonOptions.style.extension,
       root: path.join(this.project.root, ...(isDummy ? ['tests','dummy'] : [])),
       failOnMissingImport: false,
       failOnBadImport: false,
       namespace: isDummy ? 'dummy' : name,
       imports: {},
-      useModifierHelperHelpers: ember.isAbove('v3.27.0-beta.2')
+      useModifierHelperHelpers: ember.isAbove('v3.27.0-beta.2'),
+      useHelperWrapper: !ember.isAbove('v3.27.0-beta.2'),
+      embroiderStatic: addonOptions.embroiderStatic,
     }
     this._getBabelOptions().plugins.splice(0, 0, [require.resolve('./lib/hbs-imports-babel-plugin'), options]);
     this._super.included.call(this, arguments);
@@ -123,7 +126,7 @@ module.exports = {
   _scopedStyles(tree, namespace, outputFile) {
     const config = this._getAddonOptions().style;
     outputFile = outputFile || 'pod-styles.' + config.extension
-    tree = new Funnel(tree, { include: [ '**/*.scoped.' + config.extension ] });
+    tree = new Funnel(tree, { include: [ '**/*.module.' + config.extension ] });
     tree = new StylesRewriter(tree, {
       namespace,
       extension: config.extension,
@@ -138,7 +141,7 @@ module.exports = {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;
     registry.add('template', {
-      name: 'ember-template-imports',
+      name: 'ember-hbs-imports',
       ext: 'hbs',
       before: ['ember-cli-htmlbars'],
       toTree: (tree) => {
@@ -148,14 +151,17 @@ module.exports = {
         const VersionChecker = require('ember-cli-version-checker');
         const checker = new VersionChecker(this);
         const ember = checker.for('ember-source');
+        const addonOptions = this._getAddonOptions();
         const options = {
-          styleExtension: this._getAddonOptions().style.extension,
+          styleExtension: addonOptions.style.extension,
           root: path.join(this.project.root, ...(isDummy ? ['tests','dummy'] : [])),
           failOnMissingImport: false,
           failOnBadImport: false,
           namespace: isDummy ? 'dummy' : name,
           imports: this.imports,
-          useModifierHelperHelpers: ember.isAbove('v3.27.0-beta.2')
+          useModifierHelperHelpers: ember.isAbove('v3.27.0-beta.2'),
+          useHelperWrapper: !ember.isAbove('v3.27.0-beta.2'),
+          embroiderStatic: addonOptions.embroiderStatic,
         }
         tree = new TemplateImportProcessor(tree, options);
         return tree;

ember-cli-build.js

@@ -4,7 +4,6 @@ const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   const app = new EmberAddon(defaults, {
-    sassOptions: { implementation: require('node-sass') }
   });
 
   /*

index.d.ts

@@ -0,0 +1 @@
+import 'ember-source/types/stable'

lib/StylesRewriter.ts

@@ -23,8 +23,8 @@ module.exports = class StylesRewriter extends BroccoliFilter {
     this.options.extension = this.options.extension || 'scss';
     this.options.before = this.options.before || [];
     this.options.after = this.options.after || [];
-    this.extensions = [ 'scoped.' + this.options.extension ];
-    this.targetExtension = 'scoped.' + this.options.extension;
+    this.extensions = [ 'module.' + this.options.extension ];
+    this.targetExtension = 'module.' + this.options.extension;
   }
 
   cacheKeyProcessString(string, relativePath) {
@@ -43,7 +43,7 @@ module.exports = class StylesRewriter extends BroccoliFilter {
     if (relativePath.endsWith('pod-styles.scss')) {
       return contents;
     }
-    if (relativePath.endsWith('scoped.scss')) {
+    if (relativePath.endsWith('module.scss')) {
       const plugins = [...this.options.before]
       plugins.push(rewriterPlugin({
         filename: relativePath,

lib/hbs-imports-babel-plugin.ts

@@ -2,7 +2,6 @@ import ImportProcessor from './import-processor';
 import p from 'path';
 import type * as BabelCoreNamespace from '@babel/core';
 import type * as BabelTypesNamespace from '@babel/types';
-import type { NodePath } from '@babel/traverse';
 import { PluginObj } from '@babel/core';
 import { V8IntrinsicIdentifier } from '@babel/types';
 
@@ -39,7 +38,7 @@ module.exports = function hbsImports({ types: t }: { types: BabelTypes}) {
           if (!fileName) return;
           const importedStyles = allImports && [...allImports.others]
             .filter(x => x.endsWith('.scss'))
-            .map(x => x.replace(new RegExp('^'+ImportProcessor.options.namespace + '\/'), ''))
+            .map(x => x.replace(new RegExp('^'+ImportProcessor.options.namespace + '/'), ''))
             .map(x => p.relative(p.dirname(fileName), p.join(ImportProcessor.options.root, x)))
             .map(x => x.startsWith('.') ? x : `./${x}`);
           importedStyles?.forEach((s) => {

lib/import-processor.ts

@@ -87,6 +87,7 @@ const importProcessors = {
     useHelperWrapper: true,
     useSafeImports: true,
     extendImportPathForNamedImports: true,
+    embroiderStatic: true,
     messageFormat: 'json'
   },
   glimmer,
@@ -188,8 +189,11 @@ const importProcessors = {
     const components = imported.info.components;
     const helpers = imported.info.helpers;
     const modifiers = imported.info.modifiers;
+    const options = this.options;
+
     function findImport(name: string) {
       return imports.find((imp) => {
+        if (options.embroiderStatic && imp.shouldLookInFile) return false;
         if (imp.isStyle) {
           return name.split('.')[0] === imp.localName;
         }
@@ -355,11 +359,13 @@ const importProcessors = {
     }
 
     const createComponentLetBlockExpr = (comp: [key: string, info: {path: string}]) => {
-      return importProcessors.glimmer.preprocess(`{{#let (component "${comp[1].path}") as |${comp[0]}|}}{{/let}}`).body[0] as glimmer.AST.BlockStatement;
+      const path = (options.embroiderStatic ? '__hbs__import_' : '') +  comp[1].path.replace(/\\/g, '/');
+      return importProcessors.glimmer.preprocess(`{{#let (component "${path}") as |${comp[0]}|}}{{/let}}`).body[0] as glimmer.AST.BlockStatement;
     };
     const handleHelper = (helper: { nodes: PathExpression[], resolvedPath: string }) => {
+      const path = (options.embroiderStatic ? '__hbs__import_' : '') +  helper.resolvedPath.replace(/\\/g, '/');
       if (this.options.useModifierHelperHelpers) {
-        let lookup =  `"${helper.resolvedPath}"`;
+        let lookup =  `"${path}"`;
         if (this.options.useHelperWrapper) {
           lookup = `(ember-hbs-imports/helpers/lookup-helper this "${helper.resolvedPath}")`;
         }
@@ -371,8 +377,9 @@ const importProcessors = {
       }
     };
     const handleModifier = (modifier: { nodes: PathExpression[], resolvedPath: string }) => {
+      const path = (options.embroiderStatic ? '__hbs__import_' : '') +   modifier.resolvedPath.replace(/\\/g, '/');
       if (this.options.useModifierHelperHelpers) {
-        let lookup =  `"${modifier.resolvedPath}"`;
+        let lookup =  `"${path}"`;
         if (this.options.useHelperWrapper) {
           lookup = `(ember-hbs-imports/helpers/lookup-modifier this "${modifier.resolvedPath}")`;
         }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-hbs-imports",
-  "version": "0.5.41",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/patricklx/ember-hbs-imports"
@@ -26,9 +26,10 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
+    "@babel/core": "^7.23.9",
+    "@babel/types": "^7.23.9",
     "@glimmer/reference": "^0.84.2",
     "@glimmer/syntax": "^0.84.2",
-    "@types/ember__runloop": "^4.0.1",
     "broccoli-asset-rev": "^2.7.0",
     "broccoli-concat": "^4.2.4",
     "broccoli-funnel": "^3.0.3",
@@ -48,9 +49,7 @@
     "@commitlint/config-conventional": "^7.1.2",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.7.0",
-    "@types/ember": "^4.0.0",
-    "@types/babel__traverse": "^7.18.3",
-    "@types/babel__core": "^7.18.3",
+    "@types/node": "^18.15.3",
     "@typescript-eslint/eslint-plugin": "^3.1.0",
     "@typescript-eslint/parser": "^3.1.0",
     "ember-auto-import": "^2.4.1",
@@ -61,26 +60,26 @@
     "ember-cli-sass": "^10.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-template-lint": "^4.6.0",
-    "ember-cli-uglify": "^2.1.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-modifier": "^3.2.7",
     "ember-resolver": "^10.1.0",
-    "ember-source": "^4.3.0",
+    "ember-source": "^5.6.0",
     "ember-source-channel-url": "^1.1.0",
     "ember-try": "^1.0.0",
     "eslint": "^7.12.1",
     "eslint-plugin-ember": "^5.2.0",
     "eslint-plugin-node": "^7.0.1",
     "husky": "^1.3.1",
     "loader.js": "^4.7.0",
-    "node-sass": "^5.0.0",
     "ember-qunit": "^5.1.5",
     "qunit": "^2.19.1",
     "semantic-release": "^15.13.2",
     "typescript": "^4.0.0",
-    "webpack": "^5.0.0"
+    "webpack": "^5.0.0",
+    "sass": "^1.71.1"
   },
   "resolutions": {
     "minimist": "^1.2.5",