Not sure if bug with Octane, or if I'm doing something wrong #10

NullVoxPopuli · 2019-02-21T05:09:02Z

I have this template:

{{import Intro from 'emberconf-2019/src/ui/routes/application/-components/section-01-intro'}}

<Slides as |actions|>
  <Intro @openPresenterView={{actions.togglePresenterView}} />
...

and get this error:

Error: Assertion Failed: Could not find component named "emberconf-2019/src/ui/routes/application/-components/section-01-intro" (no component or template with that name was found) index.js:163

But, in the console:

> Object.keys(window.requirejs.entries).filter(p => p.includes('section-01'))
Array [ "emberconf-2019/src/ui/routes/application/-components/section-01-intro/component", "emberconf-2019/src/ui/routes/application/-components/section-01-intro/template" ]

The text was updated successfully, but these errors were encountered:

davewasmer · 2019-02-21T05:11:01Z

@NullVoxPopuli under the hood, this addon just takes the import path and passes it directly to the {{component helper (except for relative imports - we do some path manipulation there, but it still ultimately is passed to {{component). So my guess is that you'll need to drop the emberconf-2019 prefix?

NullVoxPopuli · 2019-02-21T05:21:11Z

dropping the app name:

{{import Intro from 'src/ui/routes/application/-components/section-01-intro'}}

Error: Assertion Failed: Could not find component named "src/ui/routes/application/-components/section-01-intro" (no component or template with that name was found)

with a relative import, I get this error:

{{import Intro from './-components/section-01-intro'}}

Error: Assertion Failed: Could not find component named "../emberconf-2019/src/ui/routes/application/-components/section-01-intro" (no component or template with that name was found)

I guess what's strange is that these paths in the errors seem correct.
-> for the relative import, I'm lead to believe the "working directory" is the src folder, but I think I'd expect src/ui/components if using the component helper.

I wonder if something broke in ember-cli w/r/t private collections recently (using master of 2 hours ago)

idk:

davewasmer · 2019-02-21T05:23:56Z

I looks like you're using this in an MU app? If so, I haven't tested the relative path stuff against MU structure at all. I'd be happy to take a PR that corrects any bugs there, but likely won't have time to tackle that myself for a bit (also - hopefully this addon will be obsoleted in MU apps by actual template imports soon).

You can check if it's this addon vs. ember-cli by simply replacing your absolute import statements with {{component $ABSOLUTE_PATH}}. If you get the same error - it's not this addon. If you don't, then it's us.

NullVoxPopuli · 2019-02-21T05:25:44Z

gotchya, yeah, it's def an issue with component/ember-cli then.

I'm using a fresh octane app:

npx ember-cli new my-app -b ember-octane-app-blueprint

lifeart · 2019-02-21T07:32:22Z

Looks like I have an idea how to solve this issue.
we need to alias component path somehow (using helper, js injection or <script> inline);

define.alias('emberclear/src/ui/routes/index/-components/compatibility/feature/template', 'emberclear/src/ui/components/${template-hash}/compatibility/feature/template');
define.alias('emberclear/src/ui/routes/index/-components/compatibility/feature/component', 'emberclear/src/ui/components/${template-hash}/compatibility/feature/component');
define.alias('emberclear/src/ui/routes/index/-components/compatibility/feature', 'emberclear/src/ui/components/${template-hash}/compatibility/feature');

example:

function generateHash(module, testName) {
  	var str = module + "\x1C" + testName;
  	var hash = 0;

  	for (var i = 0; i < str.length; i++) {
  		hash = (hash << 5) - hash + str.charCodeAt(i);
  		hash |= 0;
  	}

  	// Convert the possibly negative integer hash code into an 8 character hex string, which isn't
  	// strictly necessary but increases user understanding that the id is a SHA-like hash
  	var hex = (0x100000000 + hash).toString(16);
  	if (hex.length < 8) {
  		hex = "0000000" + hex;
  	}

  	return hex.slice(-8);
}



function registerAbsoluteImport(templateFileName, originalImport) {
	
	const templateId = generateHash(templateFileName, originalImport).slice(0, 5); // f34f3
	const appName = getOwner(this).application.name;
	const splitter = originalImport.includes('/-components') ? '/-components/' : '/components/';
	const componentName = originalImport.split(splitter)[1];
	const localPrefix = `${appName}/src/ui/components/${templateId}/`;
	const absoluteComponentPath =  localPrefix + componentName;

	if (!require.has(absoluteComponentPath)) {
		
		
		define.alias(originalImport,  absoluteComponentPath);
		define.alias(originalImport + '/template',  absoluteComponentPath + '/template');
		define.alias(originalImport + '/component',  absoluteComponentPath + '/component');

	}

	return absoluteComponentPath;
}

{{#let (component (registerAbsoluteImport "current-file-name.hbs" "src/ui/routes/application/-components/section-01-intro")) as |Intro|}}
    <Intro />
{{/let}}

--->>

{{#let (component 'f34f3/section-01-intro') as |Intro|}}
   <Intro />
{{/let}}

lifeart · 2019-02-21T08:54:09Z

also, we can do handy transform in runtime

import { Foo, Bar } from 'src/ui/components'

--- hbs ---

function dasherizeName(name = '') {
	const result = [];
	const nameSize = name.length;
	if (!nameSize) {
		return '';
	}
	result.push(name.charAt(0));
	for (let i = 1; i < nameSize; i++) {
		let char = name.charAt(i);
		if (char === char.toUpperCase()) {
			if (char !== '-' && char !== '/' && char !== '_') {
				if (result[result.length - 1] !== '-' && result[result.length - 1] !== '/') {
					result.push('-');
				}
			}
		}
		result.push(char);
	}
	return result.join('');
}

function toLegacyImport(line) {
  var cleanImports = line.split('import').map((item) => item.trim()).filter((text) => text.length).map(i => i.split(' from '));
  const components = [];
  cleanImports.map(([left, right]) => {
    let importSt = right.replace(/[^a-zA-Z0-9-]+/g, " ").trim().split(' ').join('/');
    if (!importSt.endsWith('/')) {
      importSt = importSt + '/';
    }

    if (left.includes('{')) {
	  let normalizedLeft = left.replace(/[{}]+/g, " ").trim();
      const statements = normalizedLeft.trim().split(',').map(name => name && name.trim()).filter(name => name.length);
      statements.forEach((name) => {
		const parts = name.split(' as ');
		if (parts.length === 2) {
			components.push([parts[1].trim(), importSt + dasherizeName(parts[0].trim()).toLowerCase()]);
		} else {
			components.push([name.trim(), importSt + dasherizeName(name.trim()).toLowerCase()]);
		}
      });
    } else {
      components.push([left.trim(), importSt + dasherizeName(left.trim()).toLowerCase()]);
    }

  });
  let results = [];
  components.forEach(([head, tail]) => {
    results.push(`{{import ${head} from "${tail}"}}`);
  });

  return results.join('\n');
}

const templateParts = templateStr.split('--- hbs ---');
if (templateParts.length === 2) {
        // toLegacyImport can be replased to `babel` parsing and anylize
	templateStr = [ toLegacyImport(templateParts[0]), templateParts[1] ].join('/n');
}

@todo -> basic workflow
templateStr

to

{{import Foo from 'src/ui/components/foo'}}
{{import Bar from 'src/ui/components/bar'}}

lifeart · 2019-02-21T09:44:15Z

TLDR:

import { Foo }  from 'src/ui/routes/boo/-components/'
	
--- hbs ---

will be transformed to

{{import Foo from "src/ui/routes/boo/-components/foo"}}

this will be transformed to

{{#let (component (registerAbsoluteImport "current-file-name.hbs" "src/ui/routes/boo/-components/foo")) as |Foo|}}
	...
{{/let}}

registerAbsoluteImport will return sdfdf/foo, and it can be rewrited like

{{#let (component "sdfdf/foo") as |Foo|}}
	... 
{{/let}}

davewasmer · 2019-02-21T15:52:18Z

@lifeart is the goal here simply to get the named import syntax? I.e the import { Foo } part?

Also, why the --- hbs ---?

I'm hesitant to introduce this much complexity if this is just to get import { Foo }, especially since that might confuse some folks (since it looks like ES6 named imports, but doesn't really share the semantics at all).

lifeart · 2019-02-21T16:02:40Z

https://gist.github.com/lifeart/58f74c89812c420bcb3044857732292b

lifeart · 2019-02-21T16:06:51Z

@davewasmer, this is Octane feature (named imports and JS syntax on the top of the template), and other hbs stuff should go after --- hbs --- line.

NullVoxPopuli · 2019-02-21T16:12:08Z

caveat though: there isn't yet an RFC for this -- just want to keep that in mind :)

knownasilya · 2019-02-21T16:12:57Z

@davewasmer https://github.com/ef4/rfcs/blob/js-compatible-resolving/text/0000-js-compatible-resolution.md is the pre-RFC

lifeart · 2019-02-21T16:28:42Z

lol, my --- hbs --- from https://github.com/wycats/ember-next-experiments#proposed-9, can be simply replaced to something more agreed

lifeart · 2019-02-21T18:02:26Z

https://github.com/crashco/ember-template-component-import/pull/12/files

knownasilya · 2019-12-05T01:53:37Z

MU support will not be coming, since that was dropped. Otherwise the new syntax is in v1.2.0

NullVoxPopuli · 2019-12-05T02:16:44Z

👍

lifeart mentioned this issue Feb 21, 2019

Octane Tracking Issue emberjs/ember.js#17234

Closed

lifeart mentioned this issue Feb 21, 2019

feat: js style import support #12

Merged

knownasilya closed this as completed Dec 5, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not sure if bug with Octane, or if I'm doing something wrong #10

Not sure if bug with Octane, or if I'm doing something wrong #10

NullVoxPopuli commented Feb 21, 2019

davewasmer commented Feb 21, 2019

NullVoxPopuli commented Feb 21, 2019 •

edited

davewasmer commented Feb 21, 2019

NullVoxPopuli commented Feb 21, 2019

lifeart commented Feb 21, 2019 •

edited

lifeart commented Feb 21, 2019 •

edited

lifeart commented Feb 21, 2019 •

edited

davewasmer commented Feb 21, 2019

lifeart commented Feb 21, 2019

lifeart commented Feb 21, 2019

NullVoxPopuli commented Feb 21, 2019

knownasilya commented Feb 21, 2019

lifeart commented Feb 21, 2019

lifeart commented Feb 21, 2019

knownasilya commented Dec 5, 2019

NullVoxPopuli commented Dec 5, 2019

Not sure if bug with Octane, or if I'm doing something wrong #10

Not sure if bug with Octane, or if I'm doing something wrong #10

Comments

NullVoxPopuli commented Feb 21, 2019

davewasmer commented Feb 21, 2019

NullVoxPopuli commented Feb 21, 2019 • edited

davewasmer commented Feb 21, 2019

NullVoxPopuli commented Feb 21, 2019

lifeart commented Feb 21, 2019 • edited

lifeart commented Feb 21, 2019 • edited

lifeart commented Feb 21, 2019 • edited

TLDR:

davewasmer commented Feb 21, 2019

lifeart commented Feb 21, 2019

lifeart commented Feb 21, 2019

NullVoxPopuli commented Feb 21, 2019

knownasilya commented Feb 21, 2019

lifeart commented Feb 21, 2019

lifeart commented Feb 21, 2019

knownasilya commented Dec 5, 2019

NullVoxPopuli commented Dec 5, 2019

NullVoxPopuli commented Feb 21, 2019 •

edited

lifeart commented Feb 21, 2019 •

edited

lifeart commented Feb 21, 2019 •

edited

lifeart commented Feb 21, 2019 •

edited