规划开发dom相关工作

book.json

@@ -6,7 +6,7 @@
     "root": "./docs",
     "links": {
         "sidebar": {
-            "Home": "https://meepo.com.cn"
+            "首页": "https://github.com/meepobrother/nger"
         }
     },
     "plugins": [
@@ -123,8 +123,8 @@
             "token": ""
         },
         "donate": {
-            "wechat": "",
-            "alipay": "",
+            "wechat": "./docs/WechatIMG95.jpeg",
+            "alipay": "./docs/WechatIMG95.jpeg",
             "title": "意思意思？",
             "button": "赏",
             "alipayText": "支付宝打赏",

packages/nger-cli/lib/install.ts

@@ -0,0 +1,18 @@
+import { Command, Inject, Logger } from 'nger-core'
+import { join } from 'path';
+const root = process.cwd();
+@Command({
+    name: 'install <name>',
+    description: '安装脚本',
+    example: {
+        command: 'nger install addon',
+        description: '安装插件'
+    }
+})
+export class InstallCommand {
+    @Inject() logger: Logger;
+    name: string = '';
+    run() {
+        this.logger.warn(`install ${this.name}`);
+    }
+}

packages/nger-dom/README.md

@@ -1,11 +1,3 @@
 # `nger-dom`
 
-> TODO: description
-
-## Usage
-
-```
-const ngerDom = require('nger-dom');
-
-// TODO: DEMONSTRATE API
-```
+> dom浏览器

packages/nger-dom/__tests__/index.ts

@@ -0,0 +1 @@
+import 'document-register-element';

packages/nger-dom/lib/create-custom-element.ts

@@ -45,6 +45,17 @@ export function createCustomElement<P>(
       super();
       this.ngElementStrategy = strategyFactory.create(injector || config.injector);
     }
+    // new
+    createdCallback() {
+      console.log(`createdCallback`)
+    }
+    attachedCallback() { 
+      console.log(`attachedCallback`)
+    }
+    detachedCallback(){
+      console.log(`detachedCallback`)
+    }
+    // 属性变动监控
     attributeChangedCallback(
       attrName: string,
       oldValue: string | null,
@@ -57,7 +68,7 @@ export function createCustomElement<P>(
       const propName = attributeToPropertyInputs[attrName]!;
       this.ngElementStrategy.setInputValue(propName, newValue);
     }
-
+    // 事件监控
     connectedCallback(): void {
       if (!this.ngElementStrategy) {
         this.ngElementStrategy = strategyFactory.create(config.injector);
@@ -68,7 +79,7 @@ export function createCustomElement<P>(
         this.dispatchEvent(customEvent);
       });
     }
-
+    // 销毁
     disconnectedCallback(): void {
       if (this.ngElementStrategy) {
         this.ngElementStrategy.disconnect();

packages/nger-platform-browser/lib/index.ts

@@ -1,17 +1,16 @@
-import { createPlatformFactory, ComponentRef, ApplicationRef, ElementRef, StyleRef, ComponentTemplateToken, ComponentStyleToken, ComponentPropToken, CustomElementRegistry, History, platformCore, NgModuleBootstrap, NgModuleRef, NgModuleMetadataKey, NgModuleClassAst, ComponentMetadataKey, ComponentClassAst } from 'nger-core'
+import { createPlatformFactory, ComponentRef, ComponentFactory, ApplicationRef, ElementRef, StyleRef, ComponentTemplateToken, ComponentStyleToken, ComponentPropToken, CustomElementRegistry, History, platformCore, NgModuleBootstrap, NgModuleRef, NgModuleMetadataKey, NgModuleClassAst, ComponentMetadataKey, ComponentClassAst } from 'nger-core'
 import { createCustomElement } from 'nger-dom'
 import { ComponentFactoryResolver } from 'nger-core';
-import { Injector, InjectFlags } from 'nger-di'
-import { } from 'preact';
+import { Injector, InjectFlags, Type } from 'nger-di'
 import 'document-register-element';
 import { createBrowserHistory, Location, Action } from 'history';
 
 // 当ngModule启动时运行
 export class NgerPlatformBrowser extends NgModuleBootstrap {
+    elements: Map<any, any> = new Map();
     constructor(public history: History, public customElements: CustomElementRegistry) {
         super();
-        this.history.listen((location: Location, action: Action) => {
-        })
+        this.history.listen((location: Location, action: Action) => {})
     }
     async run(ref: NgModuleRef<any>) {
         // 可以在此时生成小程序 
@@ -21,6 +20,7 @@ export class NgerPlatformBrowser extends NgModuleBootstrap {
             const element = createCustomElement(context.target, { injector: ref.injector })
             const component = context.getClass(ComponentMetadataKey) as ComponentClassAst;
             const def = component.ast.metadataDef;
+            this.elements.set(context.target, element)
             if (def.selector) {
                 this.customElements.define(def.selector, element)
                 return this.customElements.whenDefined(def.selector)
@@ -46,10 +46,19 @@ export class BrowserApplicationRef extends ApplicationRef {
     constructor(injector: Injector) {
         super(injector);
     }
+    bootstrap<C>(
+        componentOrFactory: ComponentFactory<C> | Type<C>,
+        rootSelectorOrNode?: string | any
+    ): ComponentRef<C> {
+        if (componentOrFactory instanceof ComponentFactory) {
+            return componentOrFactory.create(this.injector)
+        } else {
+            const componentFactoryResolver = this.injector.get(ComponentFactoryResolver)
+            return componentFactoryResolver.resolveComponentFactory(componentOrFactory).create(this.injector)
+        }
+    }
     attachView(view: ComponentRef<any>) {
-        const template = view.injector.get(ComponentTemplateToken, null);
         const style = view.injector.get(ComponentStyleToken, null);
-        const json = view.injector.get(ComponentPropToken, null);
         const parent = view.injector.get(ElementRef, null, InjectFlags.SkipSelf) || this.root;
         // parent.innerHTML = template;
         const elementRef = parent.firstChild;

src/server.ts

@@ -5,6 +5,8 @@ import { NgerRunnerTypeorm } from './typeorm';
 import { StoreModule } from 'nger-store';
 import { counterReducer } from './store/counter.reducer'
 import { CounterEffects } from './store/counter.effects'
+import { NgerModuleWebpack } from 'nger-module-webpack'
+import { NgerWebpackAdmin } from 'nger-webpack-admin'
 
 import { EffectsModule } from 'nger-effects';
 import { Injector } from 'nger-di';
@@ -22,8 +24,8 @@ import { Injector } from 'nger-di';
     imports: [
         // NgerModulePm2,
         // NgerAdmin,
-        // NgerModuleWebpack,
-        // NgerWebpackAdmin,
+        NgerModuleWebpack,
+        NgerWebpackAdmin,
         NgerModuleTypeorm.forRoot(NgerRunnerTypeorm),
         // StoreModule.forRoot({ count: counterReducer }),
         // EffectsModule.forRoot([CounterEffects])