Comments (10)
I believe that the TS removing the imports also prevents template imports to work in ember with TS. So, fixing support for TS would be the best approach instead of not having TS support at all.
from glimmer.js.
may be an issue in https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile
looks like plugin does not handle case with template as static property and external component import
from glimmer.js.
workaround before transform to get it working
const imports = parseStaticImports(code).filter(e => {
return e.moduleName.startsWith('@glimmerx/modifier') || !e.moduleName.startsWith("@");
}).map((el) => [...el.namedImports.map(e => e.alias), el.defaultImport]).reduce((acc, items) => {
return acc.concat(items);
}, []);
code = `
${code};
//
[${imports.map(e => `${e}`).join(',')}];
`;
from glimmer.js.
problem in this function: https://github.com/ember-cli/babel-plugin-htmlbars-inline-precompile/blob/master/index.js#L142
because imported template is not binded to the scope
// this implementation of getScope solves missing scope lookup
function getScope(scope) {
let names = Object.keys(scope.references);
while (scope) {
for (let binding in scope.bindings) {
names.push(binding);
}
if (!scope.parent) {
Object.keys(scope.references).forEach((ref) => {
if (!names.includes(ref)) {
names.push(ref);
}
});
}
scope = scope.parent;
}
return names;
}
but not solve final problem
from glimmer.js.
diff --git a/node_modules/babel-plugin-htmlbars-inline-precompile/index.js b/node_modules/babel-plugin-htmlbars-inline-precompile/index.js
index 700b3d6..29d9316 100644
--- a/node_modules/babel-plugin-htmlbars-inline-precompile/index.js
+++ b/node_modules/babel-plugin-htmlbars-inline-precompile/index.js
@@ -143,6 +143,14 @@ module.exports = function (babel) {
names.push(binding);
}
+ if (!scope.parent) {
+ Object.keys(scope.references).forEach((ref) => {
+ if (!names.includes(ref)) {
+ names.push(ref);
+ }
+ });
+ }
+
scope = scope.parent;
}
from glimmer.js.
next issue we have:
on
modifier import is removed after compilation, but scope
referencing to it
input:
import Component, { hbs } from '@glimmerx/component';
import { on, action } from '@glimmerx/modifier';
export default class App extends Component {
updateValue() { console.log(1) }
static template = hbs`
<input {{on 'input' this.updateValue}} />
`;
}
compiled output:
import { setComponentTemplate as _setComponentTemplate } from "@glimmer/core";
import { createTemplateFactory as _createTemplateFactory } from "@glimmer/core";
import Component from '@glimmerx/component';
export default class App extends Component {
updateValue() {
console.log(1);
}
}
_setComponentTemplate(_createTemplateFactory(
/*
<input {{on 'input' this.updateValue}} />
*/
{
"id": "HHfcxqIY",
"block": "[[[1,\"\\n \"],[11,\"input\"],[4,[32,0],[\"input\",[30,0,[\"updateValue\"]]],null],[12],[13],[1,\"\\n \"]],[],false,[]]",
"moduleName": "(unknown template module)",
"scope": () => [on],
"isStrictMode": true
}), App);
if I import { action, on }
from @glimmerx/modifier
;
I have only { action }
after template compilation:
If I replace @glimmerx
with @glimmer
:
from glimmer.js.
looks like issue in @babel/preset-typescript
, it's removing unused imports, may be related issue: babel/babel#9723
// https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAMwhRUIjgciRTBuAKAIFMAPSWOAE2IQEMBXAG3gGMm6BnTuAMWQBGdKHADeAXyA
possible workaround: not use ts, or parse TS -> apply hbs transform -> print ts,
from glimmer.js.
@josemarluedke I have one workaround for vite, collecting all imports before ast transform and appending all imports to array, to prevent ts deleting it.
import { transformSync } from "@babel/core";
import babelGlimmerPreset from "@glimmerx/babel-preset";
import tsPreset from "@babel/preset-typescript";
import parseStaticImports from "parse-static-imports";
const templateFileRegex = /\.(hbs)$/;
const fixDelimiter = '// [will-be-removed]';
export default function vitePluginBabelImport(
plgOptions
) {
let viteConfig;
return {
name: 'vite:glimmerx',
enforce: 'pre',
configResolved(resolvedConfig) {
viteConfig = resolvedConfig;
},
transform(rawCode, id) {
let code = rawCode;
if (templateFileRegex.test(id)) {
code = `
import { hbs } from '@glimmerx/component';
export default hbs\`${rawCode.trim()}\`;
`.trim();
} else if (!id.endsWith('.ts') && !id.endsWith('.js')) {
return;
}
const imports = parseStaticImports(code).filter(e => {
return e.moduleName.startsWith('@glimmerx/') || !e.moduleName.startsWith("@");
}).map((el) => [...el.namedImports.map(e => e.alias), el.defaultImport]).reduce((acc, items) => {
return acc.concat(items);
}, []);
code = `
${code};
${fixDelimiter}
[${imports.map(e => `${e}`).join(',')}];
`;
const result = transformSrcCode(code, id, plgOptions, viteConfig);
return {
code: result.split(fixDelimiter)[0].trim(),
map: null,
};
},
};
}
function transformSrcCode(code, fileName, plgOptions, viteConfig) {
let result = transformSync(code, {
sourceType: "module",
babelrc: false,
configFile: false,
envName: viteConfig.mode,
filename: fileName,
presets: [tsPreset, function(api, opts) {
return babelGlimmerPreset(api, {...opts, ...{
isDebug: !viteConfig.isProduction
}})
}]
});
return result.code;
}
from glimmer.js.
What needs resolving to make this preset work for TS?
from glimmer.js.
@knownasilya with latest TS compiler, new flag introduced, to not delete "not used" imports. It should help (but i'm did not tryied)
from glimmer.js.
Related Issues (20)
- Apps generated from the blueprint in `2.0.0-beta.13` do not compile
- Compatibility Error: ember-3.27, 3.28, and 4 >> Can't resolve 'ember-source/@glimmer/util.js' HOT 3
- Passing parameters to named blocks causes Parse Error HOT 2
- Current problems with the low-level API HOT 2
- @babel/[email protected] cannot be used with @glimmer/babel-preset
- setting "sideEffects": false for "@glimmer/runtime" reduces bundle size to 6kb HOT 3
- setting "sideEffects": false for "@glimmer/validator" reduces bundle size to 0.5kb HOT 1
- Importing external glimmer components as children // glimmer addons
- support async logic inside ssr renderer HOT 1
- Install fails with incorrect eslint version
- `<template>` html tag is rendered incorrectly
- Todo: add tests around component destruction
- v2.0 release checklist HOT 4
- How to get the literal expression of a component argument
- @glimmer/component breaks build in embroider-safe scenarios
- cached not exported for typescript
- Using htmlSafe on strings that contain video tags leads to content not being rendered HOT 1
- Cannot read properties of undefined (reading 'name') in first line of every template HOT 5
- `@glimmer/tracking` depends on `@glimmer/validator 0.44.0, which is too old and breaks type-checking by default.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from glimmer.js.