-
-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not sure if bug with Octane, or if I'm doing something wrong #10
Comments
@NullVoxPopuli under the hood, this addon just takes the import path and passes it directly to the |
dropping the app name: {{import Intro from 'src/ui/routes/application/-components/section-01-intro'}}
with a relative import, I get this error: {{import Intro from './-components/section-01-intro'}}
I guess what's strange is that these paths in the errors seem correct. I wonder if something broke in ember-cli w/r/t private collections recently (using master of 2 hours ago) idk: |
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 |
gotchya, yeah, it's def an issue with I'm using a fresh octane app: npx ember-cli new my-app -b ember-octane-app-blueprint |
Looks like I have an idea how to solve this issue. 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}} |
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'}} |
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}}
{{#let (component "sdfdf/foo") as |Foo|}}
...
{{/let}} |
@lifeart is the goal here simply to get the named import syntax? I.e the Also, why the I'm hesitant to introduce this much complexity if this is just to get |
@davewasmer, this is Octane feature (named imports and JS syntax on the top of the template), and other hbs stuff should go after |
caveat though: there isn't yet an RFC for this -- just want to keep that in mind :) |
lol, my |
MU support will not be coming, since that was dropped. Otherwise the new syntax is in v1.2.0 |
👍 |
I have this template:
and get this error:
But, in the console:
The text was updated successfully, but these errors were encountered: