From dade5c5ecc904d2d832663de4b5d8eb0e085469c Mon Sep 17 00:00:00 2001 From: imeepos <1037483576@qq.com> Date: Wed, 1 May 2019 06:57:55 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=84=E5=88=92=E5=BC=80=E5=8F=91dom?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=B7=A5=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- book.json | 6 ++--- packages/nger-cli/lib/install.ts | 18 +++++++++++++++ packages/nger-dom/README.md | 10 +------- packages/nger-dom/__tests__/index.ts | 1 + packages/nger-dom/__tests__/nger-dom.test.js | 7 ------ .../nger-dom/lib/create-custom-element.ts | 15 ++++++++++-- packages/nger-platform-browser/lib/index.ts | 23 +++++++++++++------ src/server.ts | 6 +++-- 8 files changed, 56 insertions(+), 30 deletions(-) create mode 100644 packages/nger-cli/lib/install.ts create mode 100644 packages/nger-dom/__tests__/index.ts delete mode 100644 packages/nger-dom/__tests__/nger-dom.test.js diff --git a/book.json b/book.json index c9b06b0..250fee9 100644 --- a/book.json +++ b/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": "支付宝打赏", diff --git a/packages/nger-cli/lib/install.ts b/packages/nger-cli/lib/install.ts new file mode 100644 index 0000000..cfb6f16 --- /dev/null +++ b/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 ', + description: '安装脚本', + example: { + command: 'nger install addon', + description: '安装插件' + } +}) +export class InstallCommand { + @Inject() logger: Logger; + name: string = ''; + run() { + this.logger.warn(`install ${this.name}`); + } +} \ No newline at end of file diff --git a/packages/nger-dom/README.md b/packages/nger-dom/README.md index f2a727f..5453d76 100644 --- a/packages/nger-dom/README.md +++ b/packages/nger-dom/README.md @@ -1,11 +1,3 @@ # `nger-dom` -> TODO: description - -## Usage - -``` -const ngerDom = require('nger-dom'); - -// TODO: DEMONSTRATE API -``` +> dom浏览器 diff --git a/packages/nger-dom/__tests__/index.ts b/packages/nger-dom/__tests__/index.ts new file mode 100644 index 0000000..d8508d7 --- /dev/null +++ b/packages/nger-dom/__tests__/index.ts @@ -0,0 +1 @@ +import 'document-register-element'; diff --git a/packages/nger-dom/__tests__/nger-dom.test.js b/packages/nger-dom/__tests__/nger-dom.test.js deleted file mode 100644 index 75c24f9..0000000 --- a/packages/nger-dom/__tests__/nger-dom.test.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -const ngerDom = require('..'); - -describe('nger-dom', () => { - it('needs tests'); -}); diff --git a/packages/nger-dom/lib/create-custom-element.ts b/packages/nger-dom/lib/create-custom-element.ts index d72d065..597562d 100755 --- a/packages/nger-dom/lib/create-custom-element.ts +++ b/packages/nger-dom/lib/create-custom-element.ts @@ -45,6 +45,17 @@ export function createCustomElement

( 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

( 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

( this.dispatchEvent(customEvent); }); } - + // 销毁 disconnectedCallback(): void { if (this.ngElementStrategy) { this.ngElementStrategy.disconnect(); diff --git a/packages/nger-platform-browser/lib/index.ts b/packages/nger-platform-browser/lib/index.ts index fb64a92..57da081 100644 --- a/packages/nger-platform-browser/lib/index.ts +++ b/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 = 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) { // 可以在此时生成小程序 @@ -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( + componentOrFactory: ComponentFactory | Type, + rootSelectorOrNode?: string | any + ): ComponentRef { + 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) { - 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; diff --git a/src/server.ts b/src/server.ts index 245b46e..87d1870 100644 --- a/src/server.ts +++ b/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])