feat(hmr): add in hmr capabilities

packages-cjs/plugin-conventions/src/preprocess-resource.ts

@@ -1,4 +1,5 @@
 import modifyCode, { ModifyCodeResult } from 'modify-code';
+import { stringify } from 'querystring';
 import * as ts from 'typescript';
 import { nameConvention } from './name-convention.js';
 import { IFileUnit, IPreprocessOptions, ResourceType } from './options.js';
@@ -16,6 +17,7 @@ interface IPos {
 }
 
 interface IFoundResource {
+  className?: string;
   localDep?: string;
   needDecorator?: [number, string];
   implicitStatement?: IPos;
@@ -29,19 +31,25 @@ interface IFoundDecorator {
 }
 
 interface IModifyResourceOptions {
+  exportedClassName?: string;
+  metadataImport: ICapturedImport;
   runtimeImport: ICapturedImport;
   implicitElement?: IPos;
   localDeps: string[];
   conventionalDecorators: [number, string][];
   customElementName?: IPos;
 }
 
+const hmrRuntimeModules = ['ICustomElementViewModel', 'CustomElement', 'LifecycleFlags', 'IHydrationContext', 'Controller'];
+const hmrMetadataModules = ['Metadata'];
+
 export function preprocessResource(unit: IFileUnit, options: IPreprocessOptions): ModifyCodeResult {
   const expectedResourceName = resourceName(unit.path);
   const sf = ts.createSourceFile(unit.path, unit.contents, ts.ScriptTarget.Latest);
-
+  let exportedClassName: string | undefined;
   let auImport: ICapturedImport = { names: [], start: 0, end: 0 };
   let runtimeImport: ICapturedImport = { names: [], start: 0, end: 0 };
+  let metadataImport: ICapturedImport = { names: [], start: 0, end: 0 };
 
   let implicitElement: IPos | undefined;
   let customElementName: IPos | undefined; // for @customName('custom-name')
@@ -60,6 +68,14 @@ export function preprocessResource(unit: IFileUnit, options: IPreprocessOptions)
       return;
     }
 
+    // Find existing import {Metadata} from '@aurelia/metadata';
+    const metadata = captureImport(s, '@aurelia/metadata', unit.contents);
+    if (metadata) {
+      // Assumes only one import statement for @aurelia/runtime-html
+      metadataImport = metadata;
+      return;
+    }
+
     // Find existing import {customElement} from '@aurelia/runtime-html';
     const runtime = captureImport(s, '@aurelia/runtime-html', unit.contents);
     if (runtime) {
@@ -75,6 +91,7 @@ export function preprocessResource(unit: IFileUnit, options: IPreprocessOptions)
     const resource = findResource(s, expectedResourceName, unit.filePair, unit.isViewPair, unit.contents);
     if (!resource) return;
     const {
+      className,
       localDep,
       needDecorator,
       implicitStatement,
@@ -88,11 +105,24 @@ export function preprocessResource(unit: IFileUnit, options: IPreprocessOptions)
     if (runtimeImportName && !auImport.names.includes(runtimeImportName)) {
       ensureTypeIsExported(runtimeImport.names, runtimeImportName);
     }
+    if (className) exportedClassName = className;
+    hmrRuntimeModules.forEach(m => {
+      if (!auImport.names.includes(m)) {
+        ensureTypeIsExported(runtimeImport.names, m);
+      }
+    });
+    hmrMetadataModules.forEach(m => {
+      if (!auImport.names.includes(m)) {
+        ensureTypeIsExported(metadataImport.names, m);
+      }
+    });
     if (customName) customElementName = customName;
   });
 
   return modifyResource(unit, {
     runtimeImport,
+    metadataImport,
+    exportedClassName,
     implicitElement,
     localDeps,
     conventionalDecorators,
@@ -102,6 +132,8 @@ export function preprocessResource(unit: IFileUnit, options: IPreprocessOptions)
 
 function modifyResource(unit: IFileUnit, options: IModifyResourceOptions) {
   const {
+    metadataImport,
+    exportedClassName,
     runtimeImport,
     implicitElement,
     localDeps,
@@ -135,13 +167,21 @@ function modifyResource(unit: IFileUnit, options: IModifyResourceOptions) {
       if (customElementName) {
         // Overwrite element name
         const name = unit.contents.slice(customElementName.pos, customElementName.end);
-        m.replace(customElementName.pos, customElementName.end,`{ ...${viewDef}, name: ${name} }`);
+        m.replace(customElementName.pos, customElementName.end, `{ ...${viewDef}, name: ${name} }`);
       } else {
         conventionalDecorators.push([implicitElement.pos, `@${dec}(${viewDef})\n`]);
       }
     }
   }
 
+  if (metadataImport.names.length) {
+    let metadataImportStatement = `import { Metadata } from '@aurelia/metadata';`;
+    if (metadataImport.end === metadataImport.start)
+      metadataImportStatement += '\n';
+    console.log(metadataImportStatement);
+    m.replace(metadataImport.start, metadataImport.end, metadataImportStatement);
+  }
+
   if (conventionalDecorators.length) {
     if (runtimeImport.names.length) {
       let runtimeImportStatement = `import { ${runtimeImport.names.join(', ')} } from '@aurelia/runtime-html';`;
@@ -152,16 +192,71 @@ function modifyResource(unit: IFileUnit, options: IModifyResourceOptions) {
     conventionalDecorators.forEach(([pos, str]) => m.insert(pos, str));
   }
 
+  if (exportedClassName && process.env.NODE_ENV !== 'production') {
+    const hmr = `
+      if ((module as any).hot) {
+          let aurelia = (module as any).hot.data?.aurelia;
+          document.addEventListener('au-started', (event) => {aurelia= (event as any).detail; });
+          const hot = (module as any).hot;
+          const controllers: Controller<ICustomElementViewModel>[] = [];
+          const ogCreated = (${exportedClassName}.prototype as any).created;
+
+          (${exportedClassName}.prototype as any).created = (controller) => {
+            ogCreated && ogCreated(controller);
+            controllers.push(controller as Controller<ICustomElementViewModel>);
+          }
+
+          hot.accept();
+          hot.dispose(function (data) {
+            data.controllers = controllers;
+            data.aurelia = aurelia;
+          });
+
+          if (hot.data?.aurelia) {
+
+            const newDefinition = CustomElement.getDefinition(${exportedClassName});
+            Metadata.define(newDefinition.name, newDefinition, ${exportedClassName});
+            Metadata.define(newDefinition.name, newDefinition, newDefinition);
+            (hot.data.aurelia.container as any).res[CustomElement.keyFrom(newDefinition.name)] = newDefinition;
+
+
+            (hot.data.controllers as typeof controllers).forEach(controller => {
+              const values = { ...controller.viewModel };
+              const hydrationContext = controller.container.get(IHydrationContext)
+              const hydrationInst = hydrationContext.instruction;
+
+              Object.keys(values).forEach(key => {
+                if (!controller.bindings?.some(y => (y as any).sourceExpression?.name === key && (y as any).targetProperty)) {
+                  delete values[key];
+                }
+              });
+              const h = (controller as any).host;
+              delete (controller as any)._compiledDef;
+              (controller.viewModel as any) = new ${exportedClassName}();
+              (controller.definition as any) = newDefinition;
+              Object.assign(controller.viewModel, values);
+              (controller.hooks as any) = new (controller.hooks as any).constructor(controller.viewModel);
+              (controller as any)._hydrateCustomElement(hydrationInst, hydrationContext);
+              h.parentNode.replaceChild((controller as any).host, h);
+              (controller as any).hostController = null;
+              (controller as any).deactivate(controller, controller.parent ?? null, LifecycleFlags.none);
+              (controller as any).activate(controller, controller.parent ?? null, LifecycleFlags.none);
+            });
+          }
+        }`;
+    m.append(hmr);
+  }
+
   return m.transform();
 }
 
 function captureImport(s: ts.Statement, lib: string, code: string): ICapturedImport | void {
   if (ts.isImportDeclaration(s) &&
-      ts.isStringLiteral(s.moduleSpecifier) &&
-      s.moduleSpecifier.text === lib &&
-      s.importClause &&
-      s.importClause.namedBindings &&
-      ts.isNamedImports(s.importClause.namedBindings)) {
+    ts.isStringLiteral(s.moduleSpecifier) &&
+    s.moduleSpecifier.text === lib &&
+    s.importClause &&
+    s.importClause.namedBindings &&
+    ts.isNamedImports(s.importClause.namedBindings)) {
     return {
       names: s.importClause.namedBindings.elements.map(e => e.name.text),
       start: ensureTokenStart(s.pos, code),
@@ -222,7 +317,7 @@ function findResource(node: ts.Node, expectedResourceName: string, filePair: str
   const pos = ensureTokenStart(node.pos, code);
 
   const className = node.name.text;
-  const {name, type} = nameConvention(className);
+  const { name, type } = nameConvention(className);
   const isImplicitResource = isKindOfSame(name, expectedResourceName);
   const foundType = findDecoratedResourceType(node);
 
@@ -245,6 +340,7 @@ function findResource(node: ts.Node, expectedResourceName: string, filePair: str
       // @customElement('custom-name')
       const customName = foundType.expression.arguments[0] as ts.StringLiteral;
       return {
+        className,
         implicitStatement: { pos: pos, end: node.end },
         customName: { pos: ensureTokenStart(customName.pos, code), end: customName.end }
       };
@@ -254,12 +350,14 @@ function findResource(node: ts.Node, expectedResourceName: string, filePair: str
       // Custom element can only be implicit resource
       if (isImplicitResource && filePair) {
         return {
+          className,
           implicitStatement: { pos: pos, end: node.end },
           runtimeImportName: isViewPair ? 'view' : 'customElement'
         };
       }
     } else {
       const result: IFoundResource = {
+        className,
         needDecorator: [pos, `@${type}('${name}')\n`],
         localDep: className,
       };