glimmerjs / glimmer-experimental Goto Github PK
View Code? Open in Web Editor NEWA set of experimental high-level APIs built on Glimmer.js
Home Page: https://glimmerjs.github.io/glimmer-experimental/
A set of experimental high-level APIs built on Glimmer.js
Home Page: https://glimmerjs.github.io/glimmer-experimental/
Using @glimmerx/blueprint app throws errors in Ubuntu
$ uname -a
Linux inspiron 5.4.0-37-generic #41-Ubuntu SMP Wed Jun 3 18:57:02 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
$ node -v
v12.18.1
$ yarn -v
1.22.4
$ yarn start
✖ 「wdm」: Hash: 81ecc0f034a5da4b974f
Version: webpack 4.43.0
Time: 15998ms
Built at: 06/29/2020 5:45:37 AM
Asset Size Chunks Chunk Names
app.bundle.js 2.46 MiB app [emitted] app
images/e14e33bc4ea14463b5e068ac55c6081f.svg 1.04 KiB [emitted]
index.html 545 bytes [emitted]
public/favicon.png 2.04 KiB [emitted]
public/logo192.png 5.96 KiB [emitted]
public/logo512.png 17 KiB [emitted]
public/manifest.json 498 bytes [emitted]
public/robots.txt 51 bytes [emitted]
tests.bundle.js 2.73 MiB tests [emitted] tests
tests/index.html 387 bytes [emitted]
Entrypoint app = app.bundle.js
Entrypoint tests = tests.bundle.js
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {app} [built]
[11] multi (webpack)-dev-server/client?http://localhost:8080 ./tests/rendering/App.test.js 40 bytes {tests} [built]
[./node_modules/@glimmerx/core/dist/modules/index.js] 522 bytes {app} {tests} [built]
[./node_modules/strip-ansi/index.js] 162 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} {tests} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {app} {tests} [built]
[./src/App.js] 1.17 KiB {app} {tests} [built]
[./src/index.js] 171 bytes {app} [built]
[./tests/rendering/App.test.js] 362 bytes {tests} [built]
+ 444 hidden modules
ERROR in ./node_modules/@glimmer/opcode-compiler/dist/modules/es2017/lib/program-context.js
Module not found: Error: Can't resolve '@glimmer/bundle-compiler' in '/home/rajasegar/Public/www/hello-glimmerx/node_modules/@glimmer/opcode-compiler/dist/modules/es201
7/lib'
@ ./node_modules/@glimmer/opcode-compiler/dist/modules/es2017/lib/program-context.js 3:0-58
@ ./node_modules/@glimmer/opcode-compiler/dist/modules/es2017/index.js
@ ./node_modules/@glimmerx/core/dist/modules/src/renderComponent/CompileTimeResolver.js
@ ./node_modules/@glimmerx/core/dist/modules/index.js
@ ./src/index.js
ERROR in ./node_modules/@glimmerx/component/dist/modules/src/GlimmerComponentManager.js
Module not found: Error: Can't resolve '@glimmerx/service' in '/home/rajasegar/Public/www/hello-glimmerx/node_modules/@glimmerx/component/dist/modules/src'
@ ./node_modules/@glimmerx/component/dist/modules/src/GlimmerComponentManager.js 3:0-76 25:38-64 28:6-17
@ ./node_modules/@glimmerx/component/dist/modules/src/Component.js
@ ./node_modules/@glimmerx/component/dist/modules/index.js
@ ./src/App.js
@ ./src/index.js
ERROR in ./node_modules/@glimmerx/core/dist/modules/src/renderComponent/index.js
Module not found: Error: Can't resolve '@glimmerx/service' in '/home/rajasegar/Public/www/hello-glimmerx/node_modules/@glimmerx/core/dist/modules/src/renderComponent'
@ ./node_modules/@glimmerx/core/dist/modules/src/renderComponent/index.js 8:0-63 97:7-33
@ ./node_modules/@glimmerx/core/dist/modules/index.js
@ ./src/index.js
Child HtmlWebpackCompiler:
2 assets
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 772 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./tests/index.html] 609 bytes {HtmlWebpackPlugin_1} [built]
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:5630) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js
process with a non-zero exit code.
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img.old'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/vmlinuz'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:5630) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/vmlinuz.old'
(node:5630) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, o
r by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=str
ict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
My understanding was that the goal for Glimmer was that people shouldn't need to use all of Ember, instead they could also opt for only lightweight Glimmer components (maybe as a part of a bigger app).
Somewhat related, there is a new project from the Snowpack crew/company, where the intent is to make a tool for rendering (mostly) vanilla HTML/CSS/JS out of JS frameworks.
Seems like their goal has some overlap with that of Glimmer. Maybe it would be a better idea to rely on their project for heavy work, and only prove the thin translation layer (renderer) for Glimmer/Ember.
Just wanted to put the idea out there. Don't know if this is a good idea or not.
I've noticed that @glimmerx/component
ships with TypeScript declarations, by virtue of not having a files
entry that excludes its index.ts
from being published.
@glimmerx/modifier
and @glimmerx/helper
, on the other hand, exclude the .ts
files they have that re-export from their corresponding @glimmer
packages.
Is that distinction intentional, or are all the @glimmerx
packages meant to include TypeScript support out of the box?
Hi there,
I've been experimenting with implementing emberx/router
and emberx/test-helper
library on top of glimmerx
:
https://github.com/izelnakri/emberx
Currently there is an interesting roadblock for implementing readable and maintanable ember.js like import { render } from 'emberx/test-helpers'
, it could be a limitation of the current API. I'll explain the situation below, feel free to let me know if there are ways to implement this behavior, currently the documentation links are down.
In case if it doesn't exist, I would appreciate if we could implement it. Because otherwise it is currently not possible for one to write maintainable integration tests for glimmerx
when they npm their way to ember from glimmer
:
Intention:
import { module, test } from 'qunit';
import { render } from 'emberx/test-helpers';
import { setupRenderingTest } from 'emberx/test-helpers/setup';
import LinkTo from '../../src/components/LinkTo'; // NOTE: imported component to test
module('Integration | <LinkTo />', function (hooks) {
setupRenderingTest(hooks);
test('it works for a basic route without params', async function (assert) {
await render('<LinkTo @route="public.index">Go to homepage</LinkTo>', LinkTo); // NOTE: currently 2nd argument needed unfortunately, explained below
assert.dom('.ember-testing a').hasText('Go to homepage');
});
});
Implementation and the roadblock(s):
// in package: emberx/src/test-helpers/index.js:
import GlimmerComponent, { hbs } from '@glimmerx/component';
import { renderComponent } from '@glimmerx/core';
import { getContext } from './context';
export function render(
template: string,
component: GlimmerComponent, // NOTE: normally we shouldn't need it if we could build an existing Component registry
services: object | undefined
): Promise<any> {
const context = getContext(); // NOTE: this just returns 'this' context of the test where its used
const targetServices = context.services || services; // NOTE: this render API should be usable without implicit resolvers, thus needs an explicit way to set services context
// testing something out:
window.hbs = hbs`<LinkTo @route="something">Another</LinkTo>`; // NOTE: hbs is just a token currently, a precompile transpiler token, a babel plugin/addon
// thus no way to get an analysis of the dynamically provided template string in the `render(template)` argument.
// we need that/or another function to return an AST with passed arguments,
// yield references as JS object when an hbs string is provided.
// Imported components inside the strings should be tokenized/included in the AST as well, somehow...
console.log('template is', template); // this only gets transpiled when provided as hbs`` in the source file,
// so as a string it loses the ComponentDefinition reference when its passed from another file,
// also imported Components inside this string miss their references, arguments, yielded state.
// TODO: in other words we need to figure out a way to serialize template strings with passed in internal components, arguments and yielded context.
return renderComponent(component, {
element: document.getElementById('ember-testing'),
args: Object.assign({}, context), // NOTE: I cant read the provided arguments from the template argument/string at the moment: I should be able to read { route: 'public.index', yield: ... }
services: Object.assign({}, context, targetServices), // NOTE: interesting approach to make it ember.js compatible but also problematic
});
// NOTE: I can't read the yielded content in this API: 'Go to homepage' yielded string in this case.
// It could also be imported components with arguments/yields
}
Issues:
How can I parse an hbs file/string dynamically to get passed in static and dynamic arguments, static html attributes, yielded test or components(that can be imported where they are defined, in another file)?
renderComponent
should accept strings or TemplateOnlyComponent with state(properties, yieldedData).
renderComponent
should accept yielded data to a component, behaving more like an outlet, thus this should also work:
interface ComponentRegistry {
[componentName: string]: GlimmerComponent;
}
return renderComponent('<LinkTo @route={{this.targetRoute}}><Icon @name="arrow-right" /> Go to homepage</LinkTo>',
element: document.getElementById('ember-testing'),
properties: { targetRoute: 'public.index' },
yieldContext: {}, // ComponentRegistry{'Icon': IconComponentDefinition, 'AnotherComponent': GlimmerComponentWithYieldedStateAndAttributesAndArguments }
services: Object.assign({}, servicesInThisContext),
});
// or maybe some other function that has the same API, accepts similar arguments as renderComponent,
// with additional properties, yieldContext option & keys provided above.
Created a new app using the blueprint, and get this error on npm start
. Using Node 12.22.1
➜ cogs git:(master) ✗ yarn start
yarn run v1.22.4
$ webpack-dev-server
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/iradchenko/sandbox/cogs/dist
✖ 「wdm」: Hash: 11a881d98d1e79d394b5
Version: webpack 4.46.0
Time: 1653ms
Built at: 04/27/2021 3:45:01 PM
Asset Size Chunks Chunk Names
app.bundle.js 405 KiB app [emitted] app
index.html 535 bytes [emitted]
public/favicon.png 2.04 KiB [emitted]
public/logo192.png 5.96 KiB [emitted]
public/logo512.png 17 KiB [emitted]
public/manifest.json 488 bytes [emitted]
public/robots.txt 51 bytes [emitted]
tests.bundle.js 406 KiB tests [emitted] tests
tests/index.html 377 bytes [emitted]
Entrypoint app = app.bundle.js
Entrypoint tests = tests.bundle.js
[1] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {app} [built]
[2] multi (webpack)-dev-server/client?http://localhost:8080 ./tests/rendering/App.test.js 40 bytes {tests} [built]
[./node_modules/ansi-html/index.js] 4.26 KiB {app} {tests} [built]
[./node_modules/html-entities/lib/index.js] 457 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {app} {tests} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {app} {tests} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 162 bytes {app} {tests} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {app} {tests} [built]
[./src/index.js] 2.92 KiB {app} [built] [failed] [1 error]
[./tests/rendering/App.test.js] 2.92 KiB {tests} [built] [failed] [1 error]
+ 22 hidden modules
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:
module.exports = function(api) {
// The API exposes the following:
// Cache the returned value forever and don't call this function again.
api.cache(true);
// Don't cache at all. Not recommended because it will be very slow.
api.cache(false);
// Cached based on the value of some function. If this function returns a value different from
// a previously-encountered value, the plugins will re-evaluate.
var env = api.cache(() => process.env.NODE_ENV);
// If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
// any possible NODE_ENV value that might come up during plugin execution.
var isProd = api.cache(() => process.env.NODE_ENV === "production");
// .cache(fn) will perform a linear search though instances to find the matching plugin based
// based on previous instantiated plugins. If you want to recreate the plugin and discard the
// previous instance whenever something changes, you may use:
var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
// Note, we also expose the following more-verbose versions of the above examples:
api.cache.forever(); // api.cache(true)
api.cache.never(); // api.cache(false)
api.cache.using(fn); // api.cache(fn)
// Return the value that will be cached.
return { };
};
at throwConfigError (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:280:9)
at readConfigJS (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:198:43)
at readConfigJS.next (<anonymous>)
at Function.<anonymous> (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:16:3)
at Generator.next (<anonymous>)
at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:261:32)
at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
at Function.errback (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:113:7)
at errback (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:60:18)
at async (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:188:31)
at onFirstPause (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:216:13)
at Generator.next (<anonymous>)
at cachedFunction (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/caching.js:58:46)
at cachedFunction.next (<anonymous>)
at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:269:25)
at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
ERROR in ./tests/rendering/App.test.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:
module.exports = function(api) {
// The API exposes the following:
// Cache the returned value forever and don't call this function again.
api.cache(true);
// Don't cache at all. Not recommended because it will be very slow.
api.cache(false);
// Cached based on the value of some function. If this function returns a value different from
// a previously-encountered value, the plugins will re-evaluate.
var env = api.cache(() => process.env.NODE_ENV);
// If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
// any possible NODE_ENV value that might come up during plugin execution.
var isProd = api.cache(() => process.env.NODE_ENV === "production");
// .cache(fn) will perform a linear search though instances to find the matching plugin based
// based on previous instantiated plugins. If you want to recreate the plugin and discard the
// previous instance whenever something changes, you may use:
var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
// Note, we also expose the following more-verbose versions of the above examples:
api.cache.forever(); // api.cache(true)
api.cache.never(); // api.cache(false)
api.cache.using(fn); // api.cache(fn)
// Return the value that will be cached.
return { };
};
at throwConfigError (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:280:9)
at readConfigJS (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/files/configuration.js:198:43)
at readConfigJS.next (<anonymous>)
at Function.<anonymous> (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:16:3)
at Generator.next (<anonymous>)
at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:261:32)
at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
at Function.errback (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:113:7)
at errback (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/gensync-utils/async.js:60:18)
at async (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:188:31)
at onFirstPause (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:216:13)
at Generator.next (<anonymous>)
at cachedFunction (/Users/iradchenko/sandbox/cogs/node_modules/@babel/core/lib/config/caching.js:58:46)
at cachedFunction.next (<anonymous>)
at step (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:269:25)
at evaluateAsync (/Users/iradchenko/sandbox/cogs/node_modules/gensync/index.js:291:5)
@ multi ./tests/rendering/App.test.js tests[0]
Child HtmlWebpackCompiler:
2 assets
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
[./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 751 bytes {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./tests/index.html] 588 bytes {HtmlWebpackPlugin_1} [built]
ℹ 「wdm」: Failed to compile.
Currently, for a component file, formatting will not apply if the tagged template expression is named anything other than hbs
.
Improve the prettier plugin such renaming of the export still works.
Formats today
import Component, { hbs } from '@glimmex/component';
export default class Example extends Component {
static template = hbs`
<h1>
Hello World
</h1>
`;
}
Currently does not format
import Component, { hbs as tpl } from '@glimmex/component';
export default class Example extends Component {
static template = tpl`
<h1>
Hello World
</h1>
`;
}
The app does build if i make the change as noted below:
.babelrc.js:
module.exports = function (api) {
api.cache(true); // i had to add this line
return {
presets: ['@glimmer/babel-preset', '@babel/preset-env', '@babel/preset-typescript'],
};
};
Hello,
I have followed https://glimmerjs.com/ installation process and I had issues with dependencies being outdated and the default babel caching option wasn't set.
Alright, after fixing this issue I successfully ran the Glimmer project, but after I tried using hbs I got an error: "'hbs template should have been compiled at build time". Then I tried using {{on "click" this.increment}} within precompileTemplate and I got: "TypeError: Invalid value used as weak map key".
I have tried then running the Playground example from: https://github.com/glimmerjs/glimmer-experimental/tree/master/packages/examples and it worked flawlessly.
The guide on https://glimmerjs.com/ is outdated and it only helps you set up a corrupted Glimmer project that won't work. Feel free to try it for yourself, try to use any Glimmer API within the project.
My example: https://github.com/CROmartin/Glimmer-corrupted-example
Let me know your opinions, does the Ember team care anymore to make Glimmer a standalone framework or that is just a past idea that is slowly dying?
Best regards.
// on a typescript component:
import Component, { hbs, tracked } from '@glimmerx/component';
import Another from './Another';
export default class App extends Component {
@tracked dynamicObject;
constructor() {
// console.log(Another);
window.setInterval(() => {
this.dynamicObject = {
dynamicDate: new Date().toString(),
};
}, 200);
}
static template = hbs`
<div id="intro">
<h3>Cool</h3>
<Another @text="hello" @dynamicObject={{this.dynamicObject}}/>
</div>
`;
}
The component above only works if I uncomment the console log above, the resolver cannot find/parse components imports correctly by just ts import Component from ./component
or using it inside the hbs template, it needs the code to be referenced inside the Component js, even a useless console.log(Component)
make that component render correctly.
Currently in the code above, without the console.log, render fails/app breaks with not a very helpful error:
setComponentManager.js:18 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
at Function.getPrototypeOf (<anonymous>)
at getComponentManager (setComponentManager.js:18)
at createComponentDefinition (definitions.js:33)
at definitionForComponent (definitions.js:15)
at CompileTimeResolver.lookupComponent (CompileTimeResolver.js:43)
at DefaultCompileTimeResolverDelegate.lookupComponent (delegate.js:68)
at resolveLayoutForTag (resolver.js:11)
at ifResolvedComponent (push-compile.js:150)
at compileOp (push-compile.js:64)
at pushCompileOp (push-compile.js:26)
When I turn the files into JS from TS everything works correctly, as expected.
Opening this issue with the one that I've thought of so far, but anyone who has suggestions for future plans is welcome to weigh in.
In the example above, if I uncomment {{yield}}
and then try to click on one of the buttons in the list, nothing happens (debugger isn't hit). Removing the yield fixes the issue.
In my component:
export default class Form extends Component {
static template = hbs`<form ...attributes>
{{yield}}
</form>`;
}
I get an error:
Token yield is used in an hbs tagged template literal, but is not definedeslint(@glimmerx/template-vars)
I have fixed it using the rules in my .eslintrc.js
with the following as a work around:
'@glimmerx/template-vars': ['error', 'all', { nativeTokens: ['yield'] }],
{{yield}}
needs to be added to the default set of helpers.
I've done more investigation after my PR: #88 . I found that even my PR doesn't completely solve this problem, it seems like this is a limitation of our current compiler.
If I understood correctly our glimmerx babel plugin/compiler compiles the components with their scope:
and services
concatenated:
(compiledOutputWithScopesObj, serviceOne, serviceTwo)
This is not possible for a render()
test-helper
function since essentially we are passing down a glimmer templateOnlyComponent
. I would appreciate if we could figure out a way to allow this in the glimmerx
package or compiler level, so this
context can be set directly in the renderComponent
API:
return renderComponent(hbs`
<h1>{{this.someProperty}}</h1>
`, {
element: document.getElementById('ember-testing'),
// thisContext or context or owner(which sets a context if thats what it does)
args: argsContext
services: servicesContextAssignedToThisContext
});
Expected: any value in scope is accessible in templates.
Actual: functions in scope are accessible (as modifiers or helpers), but other values are not.
Here's a minimal reproduction playground.
as I remember, there is no way to correctly destroy rendered app
Currently the following packages are not available, and don't seem to work with glimmerx
import { createCache, getValue } from '@glimmer/tracking/primitives/cache';
And
import {
createStorage,
getValue,
setValue,
TrackedStorage,
} from '@glimmer/tracking/primitives/storage';
I've introduced an RFC to improve/unify Ember language tooling, which recommends removing GlimmerX from the Glint codebase as
Could I get a GlimmerX maintainer to comment this RFC and validate this plan?
https://webpack.js.org/guides/hot-module-replacement/
https://en.parceljs.org/hmr.html
We need way to get access into application instance, and reregister + rerender components
import { registerDestructor } from '@glimmer/destroyable';
// ..
registerDestructor(componentThis, () => {
// This doesn't call
});
wor web components usage and for inegration with different external APIS, it's will be grate to have official
ability to access rendered glimmer app.
following examples:
import { renderComponent } from '@glimmerx/core';
// renderComponent(klass, opts) => Promise
is it possible to return component instance as resolved promise argument?
or opts = { connected(instance) {} }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.