Skip to content

Commit

Permalink
Merge pull request #19261 from emberjs/upstream/debug-render-tree-int…
Browse files Browse the repository at this point in the history 
…egration

[FEATURE] Upstreams the DebugRenderTree to Glimmer VM
  • Loading branch information
Chris Garrett authored Nov 12, 2020
2 parents 371c06e + 91699cc commit 97acdb5
Show file tree
Hide file tree
Showing 32 changed files with 403 additions and 853 deletions.
18 changes: 9 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,16 @@
},
"devDependencies": {
"@babel/preset-env": "^7.9.5",
"@glimmer/compiler": "0.63.5",
"@glimmer/compiler": "0.64.0",
"@glimmer/env": "^0.1.7",
"@glimmer/global-context": "0.63.5",
"@glimmer/interfaces": "0.63.5",
"@glimmer/node": "0.63.5",
"@glimmer/opcode-compiler": "0.63.5",
"@glimmer/program": "0.63.5",
"@glimmer/reference": "0.63.5",
"@glimmer/runtime": "0.63.5",
"@glimmer/validator": "0.63.5",
"@glimmer/global-context": "0.64.0",
"@glimmer/interfaces": "0.64.0",
"@glimmer/node": "0.64.0",
"@glimmer/opcode-compiler": "0.64.0",
"@glimmer/program": "0.64.0",
"@glimmer/reference": "0.64.0",
"@glimmer/runtime": "0.64.0",
"@glimmer/validator": "0.64.0",
"@simple-dom/document": "^1.4.0",
"@types/qunit": "^2.9.1",
"@types/rsvp": "^4.0.3",
Expand Down
1 change: 0 additions & 1 deletion packages/@ember/-internals/glimmer/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,4 +405,3 @@ export { capabilities } from './lib/component-managers/custom';
export { capabilities as modifierCapabilities } from './lib/modifiers/custom';
export { helperCapabilities, HelperManager, invokeHelper } from './lib/helpers/custom';
export { isSerializationFirstNode } from './lib/utils/serialization-first-node-helpers';
export { CapturedRenderNode } from './lib/utils/debug-render-tree';
8 changes: 6 additions & 2 deletions packages/@ember/-internals/glimmer/lib/compile-time-lookup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import {
Option,
WithStaticLayout,
} from '@glimmer/interfaces';
import { unwrapTemplate } from '@glimmer/util';
import RuntimeResolver from './resolver';

interface StaticComponentManager
extends WithStaticLayout<unknown, unknown, RuntimeResolver>,
extends WithStaticLayout<unknown, unknown>,
ComponentManager<unknown, unknown> {}

function isStaticComponentManager(
Expand Down Expand Up @@ -52,10 +53,13 @@ export default class CompileTimeResolverImpl implements CompileTimeResolver<Owne
};
}

let template = unwrapTemplate(manager.getStaticLayout(state));
let layout = capabilities.wrapped ? template.asWrappedLayout() : template.asLayout();

return {
handle: definitionHandle,
capabilities,
compilable: manager.getStaticLayout(state),
compilable: layout,
};
}

Expand Down
4 changes: 2 additions & 2 deletions packages/@ember/-internals/glimmer/lib/component-managers/abstract.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import {
Destroyable,
DynamicScope,
ElementOperations,
Environment,
Option,
PreparedArguments,
VM,
VMArguments,
} from '@glimmer/interfaces';
import { Reference } from '@glimmer/reference';
import { SimpleElement } from '@simple-dom/interface';
import { EmberVMEnvironment } from '../environment';

// implements the ComponentManager interface as defined in glimmer:
// tslint:disable-next-line:max-line-length
Expand All @@ -26,7 +26,7 @@ export default abstract class AbstractManager<T, U> implements ComponentManager<
abstract getDebugName(state: U): string;

abstract create(
env: EmberVMEnvironment,
env: Environment,
definition: U,
args: VMArguments,
dynamicScope: DynamicScope,
Expand Down
57 changes: 8 additions & 49 deletions packages/@ember/-internals/glimmer/lib/component-managers/curly.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { privatize as P } from '@ember/-internals/container';
import { ENV } from '@ember/-internals/environment';
import { getOwner } from '@ember/-internals/owner';
import { guidFor } from '@ember/-internals/utils';
import { addChildView, setElementView, setViewElement } from '@ember/-internals/views';
Expand All @@ -10,19 +9,18 @@ import { assign } from '@ember/polyfills';
import { DEBUG } from '@glimmer/env';
import {
Bounds,
CompilableProgram,
ComponentCapabilities,
ComponentDefinition,
Destroyable,
ElementOperations,
Environment,
Option,
PreparedArguments,
Template,
TemplateFactory,
VMArguments,
WithDynamicLayout,
WithDynamicTagName,
WithStaticLayout,
} from '@glimmer/interfaces';
import {
childRefFor,
Expand All @@ -31,8 +29,8 @@ import {
Reference,
valueForRef,
} from '@glimmer/reference';
import { registerDestructor, reifyPositional } from '@glimmer/runtime';
import { EMPTY_ARRAY, unwrapTemplate } from '@glimmer/util';
import { reifyPositional } from '@glimmer/runtime';
import { EMPTY_ARRAY } from '@glimmer/util';
import {
beginTrackFrame,
beginUntrackFrame,
Expand All @@ -44,7 +42,6 @@ import {
} from '@glimmer/validator';
import { SimpleElement } from '@simple-dom/interface';
import { BOUNDS, DIRTY_TAG, HAS_BLOCK, IS_DISPATCHING_ATTRS } from '../component';
import { EmberVMEnvironment } from '../environment';
import { DynamicScope } from '../renderer';
import RuntimeResolver from '../resolver';
import { isTemplateFactory } from '../template';
Expand Down Expand Up @@ -121,7 +118,6 @@ debugFreeze(EMPTY_POSITIONAL_ARGS);
export default class CurlyComponentManager
extends AbstractManager<ComponentStateBucket, DefinitionState>
implements
WithStaticLayout<ComponentStateBucket, DefinitionState, RuntimeResolver>,
WithDynamicLayout<ComponentStateBucket, RuntimeResolver>,
WithDynamicTagName<ComponentStateBucket> {
protected templateFor(component: Component): Template {
Expand All @@ -148,19 +144,8 @@ export default class CurlyComponentManager
return factory(owner);
}

getStaticLayout(state: DefinitionState): CompilableProgram {
return unwrapTemplate(state.template!).asLayout();
}

getDynamicLayout(bucket: ComponentStateBucket): Template {
let component = bucket.component;
let template = this.templateFor(component);

if (ENV._DEBUG_RENDER_TREE) {
bucket.environment.extra.debugRenderTree.setTemplate(bucket, template);
}

return template;
return this.templateFor(bucket.component);
}

getTagName(state: ComponentStateBucket): Option<string> {
Expand All @@ -173,7 +158,7 @@ export default class CurlyComponentManager
return (component && component.tagName) || 'div';
}

getCapabilities(state: DefinitionState) {
getCapabilities(state: DefinitionState): ComponentCapabilities {
return state.capabilities;
}

Expand Down Expand Up @@ -251,7 +236,7 @@ export default class CurlyComponentManager
* etc.
*/
create(
environment: EmberVMEnvironment,
environment: Environment,
state: DefinitionState,
args: VMArguments,
dynamicScope: DynamicScope,
Expand Down Expand Up @@ -359,28 +344,14 @@ export default class CurlyComponentManager

endUntrackFrame();

if (ENV._DEBUG_RENDER_TREE) {
environment.extra.debugRenderTree.create(bucket, {
type: 'component',
name: state.name,
args: args.capture(),
instance: component,
template: state.template,
});

registerDestructor(bucket, () => {
environment.extra.debugRenderTree.willDestroy(bucket);
});
}

// consume every argument so we always run again
consumeTag(bucket.argsTag);
consumeTag(component[DIRTY_TAG]);

return bucket;
}

getDebugName({ name }: DefinitionState) {
getDebugName({ name }: DefinitionState): string {
return name;
}

Expand Down Expand Up @@ -442,10 +413,6 @@ export default class CurlyComponentManager
didRenderLayout(bucket: ComponentStateBucket, bounds: Bounds): void {
bucket.component[BOUNDS] = bounds;
bucket.finalize();

if (ENV._DEBUG_RENDER_TREE) {
bucket.environment.extra.debugRenderTree.didRender(bucket, bounds);
}
}

didCreate({ component, environment }: ComponentStateBucket): void {
Expand All @@ -459,10 +426,6 @@ export default class CurlyComponentManager
update(bucket: ComponentStateBucket): void {
let { component, args, argsTag, argsRevision, environment } = bucket;

if (ENV._DEBUG_RENDER_TREE) {
environment.extra.debugRenderTree.update(bucket);
}

bucket.finalizer = _instrumentStart('render.component', rerenderInstrumentDetails, component);

beginUntrackFrame();
Expand Down Expand Up @@ -493,12 +456,8 @@ export default class CurlyComponentManager
consumeTag(component[DIRTY_TAG]);
}

didUpdateLayout(bucket: ComponentStateBucket, bounds: Bounds): void {
didUpdateLayout(bucket: ComponentStateBucket): void {
bucket.finalize();

if (ENV._DEBUG_RENDER_TREE) {
bucket.environment.extra.debugRenderTree.didRender(bucket, bounds);
}
}

didUpdate({ component, environment }: ComponentStateBucket): void {
Expand Down
69 changes: 15 additions & 54 deletions packages/@ember/-internals/glimmer/lib/component-managers/custom.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
import { ENV } from '@ember/-internals/environment';
import { Factory } from '@ember/-internals/owner';
import { assert } from '@ember/debug';
import {
Arguments,
Bounds,
ComponentCapabilities,
ComponentDefinition,
Destroyable,
Dict,
Environment,
Option,
Template,
VMArguments,
WithStaticLayout,
} from '@glimmer/interfaces';
import { createConstRef, Reference } from '@glimmer/reference';
import { registerDestructor } from '@glimmer/runtime';
import { unwrapTemplate } from '@glimmer/util';
import { EmberVMEnvironment } from '../environment';
import RuntimeResolver from '../resolver';
import { argsProxyFor } from '../utils/args-proxy';
import { buildCapabilities, InternalCapabilities } from '../utils/managers';
import AbstractComponentManager from './abstract';
Expand Down Expand Up @@ -173,11 +169,10 @@ export default class CustomComponentManager<ComponentInstance>
implements
WithStaticLayout<
CustomComponentState<ComponentInstance>,
CustomComponentDefinitionState<ComponentInstance>,
RuntimeResolver
CustomComponentDefinitionState<ComponentInstance>
> {
create(
env: EmberVMEnvironment,
env: Environment,
definition: CustomComponentDefinitionState<ComponentInstance>,
vmArgs: VMArguments
): CustomComponentState<ComponentInstance> {
Expand All @@ -188,54 +183,36 @@ export default class CustomComponentManager<ComponentInstance>

let bucket = new CustomComponentState(delegate, component, args, env);

if (ENV._DEBUG_RENDER_TREE) {
env.extra.debugRenderTree.create(bucket, {
type: 'component',
name: definition.name,
args: vmArgs.capture(),
instance: component,
template: definition.template,
});

registerDestructor(bucket, () => {
env.extra.debugRenderTree.willDestroy(bucket);
});
}

return bucket;
}

getDebugName({ name }: CustomComponentDefinitionState<ComponentInstance>) {
getDebugName({ name }: CustomComponentDefinitionState<ComponentInstance>): string {
return name;
}

update(bucket: CustomComponentState<ComponentInstance>) {
if (ENV._DEBUG_RENDER_TREE) {
bucket.env.extra.debugRenderTree.update(bucket);
}

update(bucket: CustomComponentState<ComponentInstance>): void {
if (hasUpdateHook(bucket.delegate)) {
let { delegate, component, args } = bucket;

delegate.updateComponent(component, args);
}
}

didCreate({ delegate, component }: CustomComponentState<ComponentInstance>) {
didCreate({ delegate, component }: CustomComponentState<ComponentInstance>): void {
if (hasAsyncLifeCycleCallbacks(delegate)) {
delegate.didCreateComponent(component);
}
}

didUpdate({ delegate, component }: CustomComponentState<ComponentInstance>) {
didUpdate({ delegate, component }: CustomComponentState<ComponentInstance>): void {
if (hasAsyncUpdateHook(delegate)) {
delegate.didUpdateComponent(component);
}
}

getContext({ delegate, component }: CustomComponentState<ComponentInstance>) {
delegate.getContext(component);
}
didRenderLayout(): void {}

didUpdateLayout(): void {}

getSelf({ delegate, component }: CustomComponentState<ComponentInstance>): Reference {
return createConstRef(delegate.getContext(component), 'this');
Expand All @@ -245,28 +222,12 @@ export default class CustomComponentManager<ComponentInstance>
return bucket;
}

getCapabilities({
delegate,
}: CustomComponentDefinitionState<ComponentInstance>): ComponentCapabilities {
return Object.assign({}, CAPABILITIES, {
updateHook: ENV._DEBUG_RENDER_TREE || delegate.capabilities.updateHook,
});
}

didRenderLayout(bucket: CustomComponentState<ComponentInstance>, bounds: Bounds) {
if (ENV._DEBUG_RENDER_TREE) {
bucket.env.extra.debugRenderTree.didRender(bucket, bounds);
}
}

didUpdateLayout(bucket: CustomComponentState<ComponentInstance>, bounds: Bounds) {
if (ENV._DEBUG_RENDER_TREE) {
bucket.env.extra.debugRenderTree.didRender(bucket, bounds);
}
getCapabilities(): ComponentCapabilities {
return CAPABILITIES;
}

getStaticLayout(state: DefinitionState<ComponentInstance>) {
return unwrapTemplate(state.template).asLayout();
getStaticLayout(state: DefinitionState<ComponentInstance>): Template {
return state.template;
}
}
const CUSTOM_COMPONENT_MANAGER = new CustomComponentManager();
Expand All @@ -279,7 +240,7 @@ export class CustomComponentState<ComponentInstance> {
public delegate: ManagerDelegate<ComponentInstance>,
public component: ComponentInstance,
public args: Arguments,
public env: EmberVMEnvironment
public env: Environment
) {
if (hasDestructors(delegate)) {
registerDestructor(this, () => delegate.destroyComponent(component));
Expand Down
Loading

0 comments on commit 97acdb5

Please sign in to comment.