Merge pull request #19306 from emberjs/update/bump-vm-enable-strict-c…

…lassic

[FEATURE strict-mode] Enable classic component usage in strict mode

package.json

@@ -74,19 +74,19 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.9.5",
-    "@glimmer/compiler": "0.69.3",
+    "@glimmer/compiler": "0.70.0",
     "@glimmer/env": "^0.1.7",
-    "@glimmer/global-context": "0.69.3",
-    "@glimmer/interfaces": "0.69.3",
-    "@glimmer/manager": "0.69.3",
-    "@glimmer/destroyable": "0.69.3",
-    "@glimmer/owner": "0.69.3",
-    "@glimmer/node": "0.69.3",
-    "@glimmer/opcode-compiler": "0.69.3",
-    "@glimmer/program": "0.69.3",
-    "@glimmer/reference": "0.69.3",
-    "@glimmer/runtime": "0.69.3",
-    "@glimmer/validator": "0.69.3",
+    "@glimmer/global-context": "0.70.0",
+    "@glimmer/interfaces": "0.70.0",
+    "@glimmer/manager": "0.70.0",
+    "@glimmer/destroyable": "0.70.0",
+    "@glimmer/owner": "0.70.0",
+    "@glimmer/node": "0.70.0",
+    "@glimmer/opcode-compiler": "0.70.0",
+    "@glimmer/program": "0.70.0",
+    "@glimmer/reference": "0.70.0",
+    "@glimmer/runtime": "0.70.0",
+    "@glimmer/validator": "0.70.0",
     "@simple-dom/document": "^1.4.0",
     "@types/qunit": "^2.9.1",
     "@types/rsvp": "^4.0.3",

packages/@ember/-internals/glimmer/index.ts

@@ -371,13 +371,7 @@ export { InputComponent as Input } from './lib/components/input';
 export { default as Component } from './lib/component';
 export { default as Helper, helper } from './lib/helper';
 export { SafeString, escapeExpression, htmlSafe, isHTMLSafe } from './lib/utils/string';
-export {
-  Renderer,
-  InertRenderer,
-  InteractiveRenderer,
-  _resetRenderers,
-  renderSettled,
-} from './lib/renderer';
+export { Renderer, _resetRenderers, renderSettled } from './lib/renderer';
 export {
   getTemplate,
   setTemplate,

packages/@ember/-internals/glimmer/lib/component-managers/curly.ts

@@ -1,4 +1,4 @@
-import { Factory, getOwner } from '@ember/-internals/owner';
+import { Factory, getOwner, Owner, setOwner } from '@ember/-internals/owner';
 import { enumerableSymbol, guidFor, symbol } from '@ember/-internals/utils';
 import { addChildView, setElementView, setViewElement } from '@ember/-internals/views';
 import { assert, debugFreeze } from '@ember/debug';
@@ -131,7 +131,7 @@ type ComponentFactory = Factory<
 
 export default class CurlyComponentManager
   implements
-    WithCreateInstance<ComponentStateBucket, Environment>,
+    WithCreateInstance<ComponentStateBucket>,
     WithDynamicLayout<ComponentStateBucket, RuntimeResolver>,
     WithDynamicTagName<ComponentStateBucket> {
   protected templateFor(component: Component): CompilableProgram | null {
@@ -250,9 +250,10 @@ export default class CurlyComponentManager
    * etc.
    */
   create(
-    environment: Environment,
+    owner: Owner,
     ComponentClass: ComponentFactory,
     args: VMArguments,
+    { isInteractive }: Environment,
     dynamicScope: DynamicScope,
     callerSelfRef: Reference,
     hasBlock: boolean
@@ -285,6 +286,8 @@ export default class CurlyComponentManager
     // `_target`, so bubbled actions are routed to the right place.
     props._target = valueForRef(callerSelfRef);
 
+    setOwner(props, owner);
+
     // caller:
     // <FaIcon @name="bug" />
     //
@@ -314,26 +317,26 @@ export default class CurlyComponentManager
 
     // We usually do this in the `didCreateElement`, but that hook doesn't fire for tagless components
     if (!hasWrappedElement) {
-      if (environment.isInteractive) {
+      if (isInteractive) {
         component.trigger('willRender');
       }
 
       component._transitionTo('hasElement');
 
-      if (environment.isInteractive) {
+      if (isInteractive) {
         component.trigger('willInsertElement');
       }
     }
 
     // Track additional lifecycle metadata about this component in a state bucket.
     // Essentially we're saving off all the state we'll need in the future.
     let bucket = new ComponentStateBucket(
-      environment,
       component,
       capturedArgs,
       argsTag,
       finalizer,
-      hasWrappedElement
+      hasWrappedElement,
+      isInteractive
     );
 
     if (args.named.has('class')) {
@@ -344,7 +347,7 @@ export default class CurlyComponentManager
       processComponentInitializationAssertions(component, props);
     }
 
-    if (environment.isInteractive && hasWrappedElement) {
+    if (isInteractive && hasWrappedElement) {
       component.trigger('willRender');
     }
 
@@ -368,7 +371,7 @@ export default class CurlyComponentManager
   }
 
   didCreateElement(
-    { component, classRef, environment, rootRef }: ComponentStateBucket,
+    { component, classRef, isInteractive, rootRef }: ComponentStateBucket,
     element: SimpleElement,
     operations: ElementOperations
   ): void {
@@ -411,7 +414,7 @@ export default class CurlyComponentManager
 
     component._transitionTo('hasElement');
 
-    if (environment.isInteractive) {
+    if (isInteractive) {
       beginUntrackFrame();
       component.trigger('willInsertElement');
       endUntrackFrame();
@@ -423,16 +426,16 @@ export default class CurlyComponentManager
     bucket.finalize();
   }
 
-  didCreate({ component, environment }: ComponentStateBucket): void {
-    if (environment.isInteractive) {
+  didCreate({ component, isInteractive }: ComponentStateBucket): void {
+    if (isInteractive) {
       component._transitionTo('inDOM');
       component.trigger('didInsertElement');
       component.trigger('didRender');
     }
   }
 
   update(bucket: ComponentStateBucket): void {
-    let { component, args, argsTag, argsRevision, environment } = bucket;
+    let { component, args, argsTag, argsRevision, isInteractive } = bucket;
 
     bucket.finalizer = _instrumentStart('render.component', rerenderInstrumentDetails, component);
 
@@ -453,7 +456,7 @@ export default class CurlyComponentManager
       component.trigger('didReceiveAttrs');
     }
 
-    if (environment.isInteractive) {
+    if (isInteractive) {
       component.trigger('willUpdate');
       component.trigger('willRender');
     }
@@ -468,8 +471,8 @@ export default class CurlyComponentManager
     bucket.finalize();
   }
 
-  didUpdate({ component, environment }: ComponentStateBucket): void {
-    if (environment.isInteractive) {
+  didUpdate({ component, isInteractive }: ComponentStateBucket): void {
+    if (isInteractive) {
       component.trigger('didUpdate');
       component.trigger('didRender');
     }
@@ -553,6 +556,7 @@ export const CURLY_CAPABILITIES: InternalComponentCapabilities = {
   createInstance: true,
   wrapped: true,
   willDestroy: true,
+  hasSubOwner: false,
 };
 
 export const CURLY_COMPONENT_MANAGER = new CurlyComponentManager();

packages/@ember/-internals/glimmer/lib/component-managers/internal.ts

@@ -25,6 +25,7 @@ const CAPABILITIES: InternalComponentCapabilities = {
   createInstance: true,
   wrapped: false,
   willDestroy: false,
+  hasSubOwner: false,
 };
 
 export interface InternalComponentState {
@@ -40,27 +41,21 @@ export default class InternalManager
   implements
     InternalComponentManager<InternalComponentState, EmberInternalComponentConstructor>,
     WithCreateInstance {
-  static for(
-    definition: EmberInternalComponentConstructor,
-    name: string
-  ): (owner: Owner) => InternalManager {
-    return (owner: Owner) => new InternalManager(owner, definition, name);
+  static for(definition: EmberInternalComponentConstructor, name: string): () => InternalManager {
+    return () => new InternalManager(definition, name);
   }
 
-  constructor(
-    private owner: Owner,
-    private ComponentClass: EmberInternalComponentConstructor,
-    private name: string
-  ) {}
+  constructor(private ComponentClass: EmberInternalComponentConstructor, private name: string) {}
 
   getCapabilities(): InternalComponentCapabilities {
     return CAPABILITIES;
   }
 
   create(
-    env: Environment,
+    owner: Owner,
     _definition: unknown,
     args: VMArguments,
+    env: Environment,
     _dynamicScope: DynamicScope,
     caller: Reference
   ): InternalComponentState {
@@ -71,7 +66,7 @@ export default class InternalManager
       args.positional.length === 0
     );
 
-    let { ComponentClass, owner } = this;
+    let { ComponentClass } = this;
     let instance = new ComponentClass(owner, args.named.capture(), valueForRef(caller));
 
     let state = { env, instance };

packages/@ember/-internals/glimmer/lib/component-managers/mount.ts

@@ -15,6 +15,7 @@ import {
   WithCreateInstance,
   WithCustomDebugRenderTree,
   WithDynamicLayout,
+  WithSubOwner,
 } from '@glimmer/interfaces';
 import { capabilityFlagsFrom } from '@glimmer/manager';
 import { createConstRef, Reference, valueForRef } from '@glimmer/reference';
@@ -45,13 +46,15 @@ const CAPABILITIES = {
   createInstance: true,
   wrapped: false,
   willDestroy: false,
+  hasSubOwner: true,
 };
 
 class MountManager
   implements
-    WithCreateInstance<EngineState, Environment>,
+    WithCreateInstance<EngineState>,
     WithDynamicLayout<EngineState, RuntimeResolver>,
-    WithCustomDebugRenderTree<EngineState, EngineDefinitionState> {
+    WithCustomDebugRenderTree<EngineState, EngineDefinitionState>,
+    WithSubOwner<EngineState> {
   getDynamicLayout(state: EngineState) {
     let templateFactory = state.engine.lookup('template:application') as TemplateFactory;
     return unwrapTemplate(templateFactory(state.engine)).asLayout();
@@ -61,13 +64,17 @@ class MountManager
     return CAPABILITIES;
   }
 
-  create(env: Environment<Owner>, { name }: EngineDefinitionState, args: VMArguments) {
+  getOwner(state: EngineState) {
+    return state.engine;
+  }
+
+  create(owner: Owner, { name }: EngineDefinitionState, args: VMArguments, env: Environment) {
     // TODO
     // mount is a runtime helper, this shouldn't use dynamic layout
     // we should resolve the engine app template in the helper
     // it also should use the owner that looked up the mount helper.
 
-    let engine = env.owner.buildChildEngineInstance(name);
+    let engine = owner.buildChildEngineInstance(name);
 
     engine.boot();
 

packages/@ember/-internals/glimmer/lib/component-managers/outlet.ts

@@ -1,4 +1,5 @@
 import { ENV } from '@ember/-internals/environment';
+import { Owner } from '@ember/-internals/owner';
 import { guidFor } from '@ember/-internals/utils';
 import { assert } from '@ember/debug';
 import EngineInstance from '@ember/engine/instance';
@@ -64,16 +65,18 @@ const CAPABILITIES: InternalComponentCapabilities = {
   createInstance: true,
   wrapped: false,
   willDestroy: false,
+  hasSubOwner: false,
 };
 
 class OutletComponentManager
   implements
-    WithCreateInstance<OutletInstanceState, Environment>,
+    WithCreateInstance<OutletInstanceState>,
     WithCustomDebugRenderTree<OutletInstanceState, OutletDefinitionState> {
   create(
-    env: Environment,
+    _owner: Owner,
     definition: OutletDefinitionState,
     _args: VMArguments,
+    env: Environment,
     dynamicScope: DynamicScope
   ): OutletInstanceState {
     let parentStateRef = dynamicScope.get('outletState');

packages/@ember/-internals/glimmer/lib/component-managers/root.ts

@@ -6,6 +6,7 @@ import {
   Environment,
   InternalComponentCapabilities,
   Option,
+  Owner,
   VMArguments,
 } from '@glimmer/interfaces';
 import { capabilityFlagsFrom } from '@glimmer/manager';
@@ -27,9 +28,10 @@ class RootComponentManager extends CurlyComponentManager {
   }
 
   create(
-    environment: Environment,
+    _owner: Owner,
     _state: unknown,
     _args: Option<VMArguments>,
+    { isInteractive }: Environment,
     dynamicScope: DynamicScope
   ) {
     let component = this.component;
@@ -42,13 +44,13 @@ class RootComponentManager extends CurlyComponentManager {
 
     // We usually do this in the `didCreateElement`, but that hook doesn't fire for tagless components
     if (!hasWrappedElement) {
-      if (environment.isInteractive) {
+      if (isInteractive) {
         component.trigger('willRender');
       }
 
       component._transitionTo('hasElement');
 
-      if (environment.isInteractive) {
+      if (isInteractive) {
         component.trigger('willInsertElement');
       }
     }
@@ -58,12 +60,12 @@ class RootComponentManager extends CurlyComponentManager {
     }
 
     let bucket = new ComponentStateBucket(
-      environment,
       component,
       null,
       CONSTANT_TAG,
       finalizer,
-      hasWrappedElement
+      hasWrappedElement,
+      isInteractive
     );
 
     consumeTag(component[DIRTY_TAG]);
@@ -87,6 +89,7 @@ export const ROOT_CAPABILITIES: InternalComponentCapabilities = {
   createInstance: true,
   wrapped: true,
   willDestroy: false,
+  hasSubOwner: false,
 };
 
 export class RootComponentDefinition implements ComponentDefinition {

packages/@ember/-internals/glimmer/lib/component.ts

@@ -724,7 +724,7 @@ const Component = CoreView.extend(
       this[DIRTY_TAG] = createTag();
       this[BOUNDS] = null;
 
-      if (DEBUG && this.renderer._destinedForDOM && this.tagName === '') {
+      if (DEBUG && this.renderer._isInteractive && this.tagName === '') {
         let eventNames = [];
         let eventDispatcher = getOwner(this).lookup<any | undefined>('event_dispatcher:main');
         let events = (eventDispatcher && eventDispatcher._finalEvents) || {};